ReactJs Class 組件中的嵌套路由開關

Question

我有兩個組件，App 和 Dashboard

App Component是主要組件，在App內部，有一個切換到我需要嵌套路由的儀表板組件，在儀表板組件內部，我需要有“/dashboard/blogs”來切換它里面的博客組件。 這里我分享兩個組件，

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;

提前致謝！

Answer 1

問題是exact關鍵字。

<Route exact path="/dashboard" component={Dashboard}/>

使用此代碼片段，您基本上會說，僅當 URL 地址恰好是“.../dashboard”時才應呈現儀表板組件。

<Route path={`${this.props.match.url}/blogs`} exact={true} component={BlogList} />

使用您說的這段代碼片段，僅當 URL 恰好是“.../dashboard/blogs/”時才應呈現BlogList組件，但它在Dashboard組件內呈現，女巫沒有呈現，因為 URL 不是“.. 。/儀表板”。

從<Route path="/dashboard" component={Dashboard} />中刪除exact關鍵字應該可以修復您的代碼。