react-router(React路由配置)！

React
react-router(路由)

• 配置 react-router(路由)安装环境

yarn add react-router-dom

• Router(路由)提供的内置组件

import {HashRouter,BrowserRouter,MemoryRouter,NavLink,Route,Redirect,Switch} from 'react-router-dom'

• Link 相当于 vue-router 的 router-link
• Link 行内属性 to后跟 要跳转的路径；className 添加类名；
  • NavLink 一个特殊的Link; 有activeClassName 属性，该标签会有指定的类名

首页第一章

• Route 相当于 vue-router 的 router-view
• Route 有几个常用的行内属性：
  • path 路径
  • render 后面跟着函数体，返回的要渲染的解构，常跟 Redirect合
    • Redirect 一般与 render结合使用，重定向
  • component 对应路由下的组件
  • exact 完全匹配 / 为 /info，才会走到该路径，不会再走到其他路径

{
	let login = true;// 判断当前页面是否是登录状态
	let str = login ? '/info' : '/login'
	return 
}}>

• 使用 Switch组件，它是用来包含 Route标签的，让我们避免走到 /info还能匹配到 Login当某个 Route标签的路径(path)被匹配上的时候，接下来的 Route标签都不再执行(节省性能)。

	
	
	{
		return 
404
	}}>

• 编程式导航

{
	this.props.history.push('/info/home');
}}>home