react router 4.0以上的路由應(yīng)用詳解
更新時間：2017年09月21日 14:48:31 作者：貓不白
本篇文章主要介紹了react router 4.0以上的路由應(yīng)用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了react router 4.0以上的路由應(yīng)用，分享給大家，具體如下：
在4.0以下的react router中，嵌套的路由可以放在一個router標(biāo)簽中，形式如下,嵌套的路由也直接放在一起。
<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 <Route component> and <Route children> 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 }) => (
<div>
<h2>Topics</h2>
<Route path={`${match.url}/:userId`} component={Profile}/>
</div>
)
上面在需要嵌套路由的component中添加新的路由
一個完整的嵌套路由的例子如下
說明及注意事項
1.以下代碼采用ES6格式
2.react-router-dom版本為4.1.1
3.請注意使用諸如HashRouter之類的history，否則一直會有warning，不能渲染
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { Router, Route, Link, Switch } from 'react-router';
import {
HashRouter,
Route,
Link,
Switch
} from 'react-router-dom';
class App extends Component {
render() {
return (
<div>
<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}
</div>
);
}
}
const About = () => (
<div>
<h3>About</h3>
</div>
)
const Home = () => (
<div>
<h3>Home</h3>
</div>
)
const Message = ({ match }) => (
<div>
<h3>new messages</h3>
<h3>{match.params.id}</h3>
</div>
)
const Inbox = ({ match }) => (
<div>
<h2>Topics</h2>
<Route path={`${match.url}/messages/:id`} component={Message}/>
</div>
)
ReactDOM.render(
(<HashRouter>
<App>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/inbox" component={Inbox} />
</App>
</HashRouter>),
document.getElementById('root')
);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在React面向組件編程中，除了上一章節(jié)的組件實例的三大核心屬性以外，還有很多重要的內(nèi)容比如：React 的生命周期，受控組件與非受控組件，高階函數(shù)和函數(shù)柯里化的理解等，在本文中會給大家繼續(xù)講解React 面向組件編程中剩余的內(nèi)容2023-03-03
react性能優(yōu)化useMemo與useCallback使用對比詳解
這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了React實現(xiàn)二級聯(lián)動的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在本文中,我們將了解如何使用Jest（Facebook 維護(hù)的一個測試框架）來測試我們的React組件,我們將首先了解如何在純 JavaScript 函數(shù)上使用 Jest,然后再了解它提供的一些開箱即用的功能,這些功能專門用于使測試 React 應(yīng)用程序變得更容易,需要的朋友可以參考下2023-10-10
React-Native使用Mobx實現(xiàn)購物車功能
本篇文章主要介紹了React-Native使用Mobx實現(xiàn)購物車功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了react配置px轉(zhuǎn)換rem的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
最近做一個React項目,所有組件都使用了函數(shù)式組件,遇到一個父組件調(diào)用子組件方法的問題,下面這篇文章主要給大家介紹了關(guān)于React父組件調(diào)用子組件中方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08