1.Router的嵌套及格式,子Route是嵌套在父Route里面的
<Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> {/* Add the route, nested where we want the UI to nest */} <Route path="messages/:id" component={Message} /> </Route> </Route> </Router>
2. 如何获取route中的参数,在route中设定参数后,可以用this.props.params参数名获取参数
参数设定:<Route path="showwork/:id" name="showwork" handler={ShowProduction}/>
获取参数:const id = this.props.params.id
3. route中设置默认的子组件,如果path刚刚match到父组件,子组件也会呈现出来。
<Route path="/" component={App}> {/* Show the dashboard at / */} <IndexRoute component={Dashboard} /> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route> </Route>
url component
/ App -> Dashboard
4. 如果自组件使用了绝对路径,那么可以通过绝对路径访问到自组件,但同时也会渲染它的父组件。
<Router> <Route path="/" component={App}> {/* Show the dashboard at / */} <IndexRoute component={Dashboard} /> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="/messages/:id" component={Message} /> </Route> </Route> </Router>url component
/messages/:id App -> Inbox -> Message
5.url Redirect. 当你改变一个组件的path时,会导致其他组件链接到该组件的url失效(url都变了不可能不失效啊),那么Redirect是你最好的选择
React.render(( <Router> <Route path="/" component={App}> <IndexRoute component={Dashboard} /> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="/messages/:id" component={Message} /> {/* Redirect /inbox/messages/:id to /messages/:id */} <Redirect from="messages/:id" to="/messages/:id" /> </Route> </Route> </Router> ), document.body)
6. path 语法
: 跟在/ , # , ?后面,表示一个参数 /hello/1 1就是参数
? 跟在url后面,表示这部分是可选的
* 匹配所有的字符直到遇到第一个*号后面的字符(非贪婪模式),如果*后面没有字符,那么就匹配到url末尾。例如 /file/*.png 会匹配 /file/1.png 但不会匹配 /file/1.png/1.png
<Route path="/hello/:name"> // matches /hello/michael and /hello/ryan <Route path="/hello/:name?"> // matches /hello, /hello/michael, and /hello/ryan <Route path="/files/*.*"> // matches /files/hello.jpg and /files/path/to/hello.jpg
7. 注意:不要使得一个path会被两个兄弟route匹配到,不要像下面这样做
<Route path="/comments" ... /> <Redirect from="/comments" ... />
8 history
createHashHistory: 默认history,但是它使用url的hash(#)部分来创建route,所以整个url看起来像这样。http://www.example.com/#/some/path.注意hash的改变并不会导致页面的刷新。
createBrowserHistory: 对于浏览器应用来说,browser history使用了浏览器内置的history api(javascript内的api)
createMemoryHistory
history的使用:注意默认是createHashHistory。
React.render( <Router history={createBrowserHistory()}> <Route path='/' component={App}> <IndexRoute component={Home} /> <Route path='about' component={About} /> <Route path='features' component={Features} /> </Route> </Router>, document.getElementById('app') );
9. routerWillLeave ,当使用了这个钩子时,每当离开这个route时,routerWillLeave就会被调用,你可以直接return false;来取消退出,或者return 一段消息提示来让用户选择是否退出。对应的js事件是onbeforeunload事件。
import { Lifecycle } from 'react-router' const Home = React.createClass({ // Assuming Home is a route component, it may use the // Lifecycle mixin to get a routerWillLeave method. mixins: [ Lifecycle ], routerWillLeave(nextLocation) { if (!this.state.isSaved) return 'Your work is not saved! Are you sure you want to leave?' }, // ... })
如果组件是多层嵌套的话,需要加上RouteContext.
import { Lifecycle, RouteContext } from 'react-router' const Home = React.createClass({ // Home should provide its route in context // for descendants further down the hierarchy. mixins: [ RouteContext ], render() { return <NestedForm /> } }) const NestedForm = React.createClass({ // Descendants use the Lifecycle mixin to get // a routerWillLeave method. mixins: [ Lifecycle ], routerWillLeave(nextLocation) { if (!this.state.isSaved) return 'Your work is not saved! Are you sure you want to leave?' }, // ... })
10.component lifecycle 在route地址迁移时引发的react的周期事件,非常重要。,地址:https://github.com/rackt/react-router/blob/master/docs/advanced/ComponentLifecycle.md