React 路由
配置
sh
npm install react-router-dom -Sjsx
import {BrowserRouter} from 'react-router-dom'
// index.js 用 BrowserRouter 包裹 APP
ReactDOM.render(
<BrowserRouter> // HashRouter 会有 /#/ BrowserRouter 则没有
<App />
</BrowserRouter>,
document.getElementById('root')
);新建Router.js
js
// 引入路由组件
import { Switch, Route } from 'react-router-dom';
// 引入页面
import ComA from './ComA'jsx
return (
<div>
<Switch>
/* exact 严格匹配 否则其他页面也会匹配 / */
<Route path='/' component={ComA} exact></Route>
<Route path='/comb' component={ComB} ></Route>
</Switch>
</div>
);APP组件
jsx
// 引入创建的 router 组件
import Router from './Router'
return (
<div className="App">
<Router className="App" />
</div>
)导航
jsx
import {Link} from 'react-router-dom'
<Link to='/' > 返回首页 </Link>增强版
jsx
import {NavLink} from 'react-router-dom'
<NavLink to='/' activeClassName={this.props.location.pathname =='/' && 'active-link'}> 返回首页</NavLink>NavLink 才有 activeClassName，但是其他组件的样式会被 / 匹配到
this.props.location.path 获取当前地址
编程式导航
jsx
this.props.history.push(url)
this.props.history.replace()
this.props.history.go()
this.props.history.goBack()
this.props.history.goForward()动态路由
React 的嵌套路由是在父组件中配置的
jsx
import {Switch, Route ,Redirect } from 'react-router-dom'
<Switch>
Redirect 重定向 exact 精确匹配,
<Redirect path='/big' exact to='/big/small1' ></Redirect>
<Route path='/big/small1/:参数名字' component={Small1}></Route>
</Switch>
this.props.match.params.参数名字 接参
<NavLink to={{pathname:'/big/small2',state:{name:'参数'}}} <NavLink />state 是保密的, 也可以 键为 query search 则会在地址栏显示
