[转] 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

:paramName

:paramName

/

?

#

this.props.params.paramName

()

()

*

*

**

**

/

?

#

<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>

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 '确认要离开？';
},
})
)