react-router-dom 嵌套路由的實(shí)現(xiàn)
更新時(shí)間：2020年05月02日 10:28:37 作者：易函123
這篇文章主要介紹了react-router-dom 嵌套路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
入口文件index.js：
import React from "react"
import ReactDOM from "react-dom"
import App from "./App.jsx"
import "babel-polyfill"
const root = document.getElementById("app")
if (root !== null) {
ReactDOM.render(<App />, document.getElementById("app"))
}
各個(gè)文件的詳細(xì)位置：
主要目錄App.jsx:
import React, { Fragment, Component } from "react"
import {
BrowserRouter as Router,
Switch,
Route,
NavLink,
Redirect,
Link,
withRouter,
} from "react-router-dom"
// 開始引入各種自定義的組件
import Index from "./pages/platform/index"
//404頁(yè)面
import ErrorPage from "./pages/ErrorPage"
import Login from "./pages/login/index"
import routes from "./routes/index"
class BaseLayout extends Component {
constructor(props) {
super(props)
}
render(){
return(
<Fragment>
<ul>
{routes.map((val,index))=>{
return(
<li key={index}>
<Link to={val.path}>{val.authName}</Link>
</li>
)
}
</ul>
<Switch>
{routes.map((route, key) => {
if (route.exact) {
return (
<Route
key={key}
exact
path={route.path}
component={(props) => {
return (
<route.component {...props} routes={route.routes} />
)
}}
>
{/* <route.component /> */}
</Route>
)
} else {
return (
<Route
key={key}
path={route.path}
component={(props) => {
return (
<route.component {...props} routes={route.routes} />
)
}}
>
{/* <route.component /> */}
</Route>
)
}
})}
<Route path="/">
<Index />
</Route>
<Route path="*">
<ErrorPage />
</Route>
</Switch>
</Fragment>
)
}
}
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<BaseLayout />
</Route>
<!--<Route path="*">-->
<!-- <ErrorPage />-->
<!-- </Route>-->
</Switch>
</Router>
)
}
}
export default App
放路由route.js:
import Index from "../pages/platform/index"
import UserAdd from "../pages/component/User/UserAdd"
import UserList from "../pages/component/User/UserList"
const routes = [
{
path: "/index",
authName: "首頁(yè)",
component: Index,
exact: true,
},
{
path: "/user",
authName: "用戶1",
component: UserList,
},
{
authName: "用戶2",
path: "/userAdd",
component: UserAdd,
},
]
export default routes
其他頁(yè)面login.jsx：
import React, { Component } from "react"
export default class Login extends Component {
render() {
return <div>Login</div>
}
}
其他頁(yè)面index.jsx：
import React, { Component } from "react"
export default class Index extends Component {
render() {
return <div>Index</div>
}
}
其他頁(yè)面UserAdd.jsx：
import React, { Component } from "react"
export default class UserAdd extends Component {
render() {
return <div>UserAdd</div>
}
}
其他頁(yè)面UserList.jsx：
import React, { Component } from "react"
export default class UserList extends Component {
render() {
return <div>UserList</div>
}
}
到此這篇關(guān)于react-router-dom 嵌套路由的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react 嵌套路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家介紹了React-three-fiber的使用初體驗(yàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
react-redux中connect的裝飾器用法@connect詳解
這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?
這篇文章主要為大家介紹了React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
修復(fù)Next.js中window?is?not?defined方法詳解
這篇文章主要為大家介紹了修復(fù)Next.js中window?is?not?defined方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例
這篇文章主要為大家介紹了基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
React使用TypeScript的最佳實(shí)踐和技巧
在React項(xiàng)目中使用TypeScript可以顯著提高代碼的可維護(hù)性和可讀性,并提供強(qiáng)大的類型檢查功能,減少運(yùn)行時(shí)錯(cuò)誤,以下是一些優(yōu)雅地將TypeScript集成到React項(xiàng)目中的最佳實(shí)踐和技巧,需要的朋友可以參考下2024-06-06
react-router-dom入門使用教程(前端路由原理)
這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關(guān)理解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了react-router-dom的使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vscode調(diào)試react?最初的源碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2023-11-11