参考https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html
路由配置
- import React from 'react'
- import { Router,Route,Link } from 'react-router'
-
- const App = React.createClass({
- render() {
- return (
- <div>
- <h1>App</h1>
- <ul>
- <li><Link to="/about">About</Link></li>
- <li><Link to="/inBox">InBox</Link></li>
- </ul>
- {this.props.children}
- </div>
- )
- }
- })
-
- const InBox = React.createClass({
- render() {
- return (
- <div>
- <h2>InBox</h2>
- {this.props.children || "Welcome to your InBox"}
- </div>
- )
- }
- })
-
- const Message = React.createClass({
- render() {
- return <h3>Message {this.props.params.id}</h3>
- }
- })
-
- React.render((
- <Router>
- <Route path="/" component={App}>
- <Route path="about" component={About} />
- <Route path="inBox" component={InBox}>
- <Route path="messages/:id" component={Message} />
- </Route>
- </Route>
- </Router>
- ),document.body)
URL | 组件 |
---|---|
/ | App |
/about | App -> About |
/inBox | App -> InBox |
/inBox/messages/:id | App -> InBox -> Message |