智慧大石
2022-11-27 16:53:18
我有兩個(gè)組件,App 和 DashboardApp Component是主要組件,在App內(nèi)部,有一個(gè)到Dashboard組件的開關(guān)我需要嵌套路由,在Dashboard Component內(nèi)部,我需要有“/dashboard/blogs”來(lái)切換里面的Blogs Component。在這里我分享兩個(gè)組件,import React, { Component } from "react";import {BrowserRouter as Router, Route, Switch} from "react-router-dom";import Signup from "./pages/Signup";import Login from "./pages/Login";import Home from "./pages/Home";import Dashboard from "./dashboard/Dashboard";class App extends Component { render() { return ( <div id="content-wrapper"> <Router> <Switch> <Route exact path="/signup" component={Signup}/> <Route exact path="/login" component={Login}/> <Route exact path="/" component={Home}/> <Route exact path="/dashboard" component={Dashboard}/> </Switch> </Router> </div> ); }}export default App;import React, {Component} from 'react';import Navbar from "./Navbar";import SideBar from "./SideBar";import "../scripts/dashboard";import {BlogList} from "./components/BlogList";import {BrowserRouter as Router, Route, Switch} from "react-router-dom";import {DashBoardHome} from "./components/DashBoardHome";class Dashboard extends Component { render(){ return ( <div id="wrapper"> <SideBar/> <div id="content-wrapper" className="d-flex flex-column"> <div id="content"> <Navbar/> <div className="container-fluid"> <Router> <Switch> <Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} /> //This is not working? </Switch> </Router> </div> </div> </div> </div> )}}export default Dashboard;提前致謝!
1 回答
斯蒂芬大帝
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
問題是exact關(guān)鍵字。
<Route exact path="/dashboard" component={Dashboard}/>通過(guò)這段代碼片段,您基本上可以說(shuō),僅當(dāng) URL 地址恰好為“.../dashboard”時(shí),才應(yīng)呈現(xiàn)儀表板組件。
<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} />使用你說(shuō)的這個(gè)代碼片段,BlogList只有當(dāng) URL 恰好是“.../dashboard/blogs/”時(shí)才應(yīng)該呈現(xiàn)該組件,但它在Dashboard組件內(nèi)部呈現(xiàn) witch 不會(huì)呈現(xiàn),因?yàn)?URL 不是“.../”儀表板”。
從中刪除exact關(guān)鍵字<Route path="/dashboard" component={Dashboard} />應(yīng)該可以修復(fù)您的代碼。
添加回答
舉報(bào)
0/150
提交
取消
