react路由之react-router && react-router-dom

react路由 – react-router && react-router-dom

参考文章点击这里

1. 同级路由
   des: 不同路径对应不同的组件(页面),路径改变,整个页面都改变
   / --> App
   /repos --> Repos
   /about --> About

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

2. 嵌套路由
   des:嵌套路由会在父级路由的基础上再根据路径的不同渲染不同的组件
   / --> App
   /repos --> App --> Repos
   /about --> App --> About

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

3. 路由传参

<Route path="/repos/:userName/:repoName" component={Repo}/>

4. IndexRoute
   des:当URL为’/'时，我们想渲染一个在 App 中的组件。不过在此时，App 的 render 中的 this.props.children 还是 undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面。

 <Router>
  <Route path="/" component={App}>
    {/* 当 url 为/时渲染 Dashboard */}
    <IndexRoute component={Dashboard} />
    <Route path="about" component={About} />
    <Route path="inbox" component={Inbox}>
      <Route path="messages/:id" component={Message} />
    </Route>
  </Route>
</Router>

<Link to="/inbox/message/123123"></Link>

5. switch
   des: 是唯一的因为它仅仅只会渲染一个路径。相比之下（不使用 包裹的情况下），每一个被location匹配到的将都会被渲染。

   详细可以看这里

6. exact

<!--
  没有加exact：
  当路径为/about，会先匹配到/，然后停止匹配，因此路由为/about渲染的还是Home组件
  加上exact:
  只有当path完全是'/'时才会匹配Home组件，否则会继续向下匹配
-->
<Router>
  <Route path="/" exact component={Home}/>
  <Route path="/about" component={About} />
</Route>