react router 4.0以上的路由如何套用-js教程-PHP中文網

react router 4.0以上的路由如何套用

小云云

發布： 2018-02-07 10:53:31

原創

1190 人瀏覽過

本文主要跟大家介紹react router 4.0以上的路由應用詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

在4.0以下的react router中，嵌套的路由可以放在一個router標籤中，形式如下,嵌套的路由也直接放在一起。

<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   <Route path="users/:userId" component={Profile} />
  </Route>
</Route>

登入後複製

但是在4.0以後，嵌套的路由與之前的就完全不同了，需要單獨放置在嵌套的根component中去處理路由，否則會一直有warning:

You should not use and in the same route

#正確形式如下

<Route component={App}>
  <Route path="groups" components={Groups} />
  <Route path="users" components={Users}>
   //<Route path="users/:userId" component={Profile} />
  </Route>
</Route>

登入後複製

上面將巢狀的路由註解掉

const Users = ({ match }) => (
 <p>
  <h2>Topics</h2>
  <Route path={`${match.url}/:userId`} component={Profile}/>
 </p>
)

登入後複製

上面在需要巢狀路由的component中新增新的路由

一個完整的巢狀路由的例子如下

說明及注意事項

#1.以下程式碼採用ES6格式

2 .react-router-dom版本為4.1.1

3.請注意使用諸如HashRouter之類的history，否則一直會有warning，不能渲染

import React, { Component } from &#39;react&#39;;
import ReactDOM from &#39;react-dom&#39;;
// import { Router, Route, Link, Switch } from &#39;react-router&#39;;
import {
 HashRouter,
 Route,
 Link,
 Switch
} from &#39;react-router-dom&#39;;

class App extends Component {
 render() {
  return (
   <p>
    <h1>App</h1>
    <ul>
     <li><Link to="/">Home</Link></li>
     <li><Link to="/about">About</Link></li>
     <li><Link to="/inbox">Inbox</Link></li>
    </ul>
    {this.props.children}

   </p>
  );
 }
}

const About = () => (
 <p>
  <h3>About</h3>
 </p>
)

const Home = () => (
 <p>
  <h3>Home</h3>
 </p>
)

const Message = ({ match }) => (
 <p>
  <h3>new messages</h3>
  <h3>{match.params.id}</h3>
 </p>
)

const Inbox = ({ match }) => (
 <p>
  <h2>Topics</h2>
  <Route path={`${match.url}/messages/:id`} component={Message}/>

 </p>
) 

ReactDOM.render(
 (<HashRouter>
  <App>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/inbox" component={Inbox} />
  </App>
 </HashRouter>),
 document.getElementById(&#39;root&#39;)
);

登入後複製