(1)插件的选择(3选择react-router,4选择react-router-dom)
react-router 为 React Router 提供核心路由功能,但是你不需要直接安装 react-router;
如果你写浏览器端应用,你应该安装 react-router-dom;
如果你写 React Native 应用,你应该安装 react-router-native;
当你安装 react-router-dom 或 react-router-native 时,都会将 react-router 作为依赖安装。
(2)路由的配置
3的配置:
import React from 'react'
import {Router,Route,IndexRoute} from 'react-router-dom'
import { hashHistory } from 'react-router'
class RouteMap extends React.Component {
updateHandle() {
console.log('每次router变化之后都会触发')
}
render() {
return (
<Router history={hashHistory} onUpdate={this.updateHandle.bind(this)}>
<Route path='/' component={App}>
<IndexRoute component={Home}/>
<Route path='city' component={City}/>
<Route path='search:keyword' component={Search}/>
<Route path='user' component={User}/>
<Route path='list' component={List}/>
<Route path='detail/:id' component={Detail}/>
<Route path="*" component={NotFound}/>
</Route>
</Router>
)
}
}
export default RouterMap
4 的配置
import React from 'react'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
class RouterMap extends React.Component {
updateHandle () {
console.log('每次router变化都会触发')
}
render () {
return (
<Router history={history} onUpdate={this.updateHandle.bind(this)}>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/city' component={City}/>
<Route path='/search:keyword' component={Search}/>
<Route path='/user' component={User}/>
<Route path='/detail:id' component={Detail}/>
<Route path='*' component={NotFound}/>
</Switch>
</Router>
)}
}
export default RouterMap
import React from 'react'
import {Router,Route} from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
class RouterMap extends React.Component {
render() {
return (
<Router history={history}>
<App>
<Route exact path="/" component={Home}/>
<Route path='/city' component={City}/>
<Route path='/login(/:router)' component={Login}/>
<Route path='/user' component={User}/>
<Route path='/search/:category(/:keyword)' component={Search}/>
<Route path='/detail/:id' component={Detail}/>
<Route path='*' component={NotFound}/>
</App>
</Router>
)
}
}
export default RouterMap