React Router 使用教程

 $ npm install -S react-router 

 import { Router } from 'react-router'; render(<Router/>, document.getElementById('app')); 

 import { Router, Route, hashHistory } from 'react-router';  render((   <Router history={hashHistory}>     <Route path="/" component={App}/>   </Router> ), document.getElementById('app')); 

 <Router history={hashHistory}>   <Route path="/" component={App}/>   <Route path="/repos" component={Repos}/>   <Route path="/about" component={About}/> </Router> 

 <Router history={hashHistory}>   <Route path="/" component={App}>   <Route path="/repos" component={Repos}/>     <Route path="/about" component={About}/>   </Route> </Router> 

 <App>   <Repos/> </App> 

 export default React.createClass({   render() {     return <div>       {this.props.children}     </div>   } }) 

 let routes = <Route path="/" component={App}>   <Route path="/repos" component={Repos}/>   <Route path="/about" component={About}/> </Route>;  <Router routes={routes} history={browserHistory}/> 

 <Route path="inbox" component={Inbox}>    <Route path="messages/:id" component={Message} /> </Route> 

 <Inbox>   <Message/> </Inbox> 

 <Route component={Inbox}>   <Route path="inbox/messages/:id" component={Message} /> </Route> 

 <Inbox>   <Message/> </Inbox> 

 <Route path="/hello/:name"> // 匹配 /hello/michael // 匹配 /hello/ryan  <Route path="/hello(/:name)"> // 匹配 /hello // 匹配 /hello/michael // 匹配 /hello/ryan  <Route path="/files/*.*"> // 匹配 /files/hello.jpg // 匹配 /files/hello.html  <Route path="/files/*"> // 匹配 /files/  // 匹配 /files/a // 匹配 /files/a/b  <Route path="/**/*.jpg"> // 匹配 /files/hello.jpg // 匹配 /files/path/to/file.jpg 

（1） :paramName

:paramName 匹配URL的一个部分，直到遇到下一个 / 、 ? 、 # 为止。这个路径参数可以通过 this.props.params.paramName 取出。

（2） ()

() 表示URL的这个部分是可选的。

（3） *

* 匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。

（4） **

** 匹配任意字符，直到下一个 / 、 ? 、 # 为止。匹配方式是贪婪模式。

 <Route path="/comments" ... /> <Route path="/comments" ... /> 

 <Router>   <Route path="/:userName/:id" component={UserPage}/>   <Route path="/about/me" component={About}/> </Router> 

 <Router>   <Route path="/" component={App}>     <Route path="accounts" component={Accounts}/>     <Route path="statements" component={Statements}/>   </Route> </Router> 

 <Router>   <Route path="/" component={App}>     <IndexRoute component={Home}/>     <Route path="accounts" component={Accounts}/>     <Route path="statements" component={Statements}/>   </Route> </Router> 

 <App>   <Home/> </App> 

 <Route path="inbox" component={Inbox}>    {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}    <Redirect from="messages/:id" to="/messages/:id" /> </Route> 

 <Route path="/" component={App}>   <IndexRedirect to="/welcome" />   <Route path="welcome" component={Welcome} />   <Route path="about" component={About} /> </Route> 

 render() {   return <div>     <ul role="nav">       <li><Link to="/about">About</Link></li>       <li><Link to="/repos">Repos</Link></li>     </ul>   </div> } 

 <Link to="/about" activeStyle={{color: 'red'}}>About</Link> <Link to="/repos" activeStyle={{color: 'red'}}>Repos</Link> 

 <Link to="/about" activeClassName="active">About</Link> <Link to="/repos" activeClassName="active">Repos</Link> 

 import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); 

 <IndexLink to="/" activeClassName="active">   Home </IndexLink> 

 <Link to="/" activeClassName="active" onlyActiveOnIndex={true}>   Home </Link> 

• browserHistory
• hashHistory
• createMemoryHistory

 import { hashHistory } from 'react-router'  render(   <Router history={hashHistory} routes={routes} />,   document.getElementById('app') ) 

 import { browserHistory } from 'react-router'  render(   <Router history={browserHistory} routes={routes} />,   document.getElementById('app') ) 

 $ webpack-dev-server --inline --content-base . --history-api-fallback 

 const history = createMemoryHistory(location) 

 <form onSubmit={this.handleSubmit}>   <input type="text" placeholder="userName"/>   <input type="text" placeholder="repo"/>   <button type="submit">Go</button> </form> 

 import { browserHistory } from 'react-router'  // ...   handleSubmit(event) {     event.preventDefault()     const userName = event.target.elements[0].value     const repo = event.target.elements[1].value     const path = `/repos/${userName}/${repo}`     browserHistory.push(path)   }, 

 export default React.createClass({    // ask for `router` from context   contextTypes: {     router: React.PropTypes.object   },    handleSubmit(event) {     // ...     this.context.router.push(path)   }, }) 

 <Route path="about" component={About} /> <Route path="inbox" component={Inbox}>   <Redirect from="messages/:id" to="/messages/:id" /> </Route> 

• /messages/:id 的 onLeave
• /inbox 的 onLeave
• /about 的 onEnter

 <Route path="inbox" component={Inbox}>   <Route     path="messages/:id"     onEnter={       ({params}, replace) => replace(`/messages/${params.id}`)     }    /> </Route> 

 const Home = withRouter(   React.createClass({     componentDidMount() {       this.props.router.setRouteLeaveHook(         this.props.route,          this.routerWillLeave       )     },      routerWillLeave(nextLocation) {       // 返回 false 会继续停留当前页面，       // 否则，返回一个字符串，会显示给用户，让其自己决定       if (!this.state.isSaved)         return '确认要离开？';     },   }) )