react-router之嵌套路由
import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link, } from 'react-router-dom' import './App.css'; const Home = () => { return <div> <h3>我是首页</h3> </div> }; const About = () => { return <div> <h3>我是关于</h3> </div> }; const Topics = ( {match} ) => { return <div> <h3>我是列表</h3> <ul> <li><Link to={`${match.url}/react`}>a</Link></li> <li><Link to={`${match.url}/router`}>b</Link></li> <li><Link to={`${match.url}/redux`}>c</Link></li> </ul> <hr/> <Route path={`${match.url}/:topicId`} component={Topic}/> </div> }; const Topic = ({match}) => { return <div><h3>{match.params.topicId}</h3></div> }; class App extends Component { render() { return ( <Router> <div> <ul> <li><Link to="/">首页</Link></li> <li><Link to="/about">关于</Link></li> <li><Link to="/topics">列表</Link></li> </ul> <hr/> <Route exact={true} path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/topics" component={Topics} /> </div> </Router> ); } } export default App
react-router嵌套路由: 上面是官方的例子。嵌套是在Topics组件上嵌套了一个路由。
const Topics = ( {match} ) => {
return <div>
<h3>我是列表</h3>
<ul>
<li><Link to={`${match.url}/react`}>a</Link></li>
<li><Link to={`${match.url}/router`}>b</Link></li>
<li><Link to={`${match.url}/redux`}>c</Link></li>
</ul>
<hr/>
<Route path={`${match.url}/:topicId`} component={Topic}/>
</div>
};
1.首先在Topics组件上 有个match对象,然后我们继续在Topics组件定义 Link 在路径上 to={`${match.url}/react`} ` ${match.url}` 返回的就是 '/topics' 所以{`${match.url}/react`} == '/topics/react'
我们可以console.log(match)看一下 这下就简单明了了 。
2.<Route path={`${match.url}/:topicId`} component={Topic}/> 继续在Topics组件中 定义Route path={`${match.url}/:topicId`} /:topicId 就是 {`${match.url}/react`} 中的react.
3. const Topic = ({match}) => {return <div><h3>{match.params.topicId}</h3></div>}; <h3>{match.params.topicId}</h3 {match.params.topicId}就是{`${match.url}/react`} 中的react.
官网当中基本使用的这个例子就是这样的一个大概。
下面是自己在写了一个例子,加深理解吧(ps:毕竟是初学react(✺ω✺))
import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link, } from 'react-router-dom' import './App.css'; const Dz = () => { return <div> <h3>达州,四川的一个市,也是我的家乡</h3> </div> }; const Cd = ({match}) => { return <div> <h3>成都,四川省会,天府之国</h3> <ul> <li><Link to={`${match.url}/lqyq`}>龙泉驿区</Link></li> <li><Link to={`${match.url}/jjq`}>锦江区</Link></li> <li><Link to={`${match.url}/gxq`}>高新区</Link></li> </ul> <Route path={`${match.url}/lqyq`} render={ () => { return <div>龙泉驿区:汽车城</div> } } /> <Route path={`${match.url}/jjq`} render={ () => { return <div>锦江区:春熙路就在那</div> } } /> <Route path={`${match.url}/gxq`} render={ () => { return <div>高新区:成都最有逼格的地方</div> } } /> </div> }; const Bj = () => { return <div> <h3>北京,中国首都,政治中心</h3> </div> }; class App extends Component { render() { return ( <Router> <div> <ul> <li><Link to="/dazhou">达州</Link></li> <li><Link to="/chengdu">成都</Link></li> <li><Link to="/beijing">北京</Link></li> </ul> <Route path="/dazhou" component={Dz} /> <Route path="/chengdu" component={Cd} /> <Route path="/beijing" component={Bj} /> </div> </Router> ); } } export default App