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

  

 








 

posted @ 2018-01-18 21:48  ahaowh  阅读(14638)  评论(0编辑  收藏  举报