首頁 > web前端 > js教程 > 主體

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

小云云
發布: 2018-02-07 10:53:31
原創
1194 人瀏覽過

本文主要跟大家介紹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;)
);
登入後複製

相關推薦:

##vue router動態路由與巢狀路由實例詳解

##以路由延遲載入Angular模組方法

Vue-Router2實作路由功能實例講解

以上是react router 4.0以上的路由如何套用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!