ReactJs 类组件中的嵌套路由开关

Question

我有两个组件，App 和 DashboardApp Component是主要组件，在App内部，有一个到Dashboard组件的开关我需要嵌套路由，在Dashboard Component内部，我需要有“/dashboard/blogs”来切换里面的Blogs Component。在这里我分享两个组件，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} />

使用你说的这个代码片段，BlogList只有当 URL 恰好是“.../dashboard/blogs/”时才应该呈现该组件，但它在Dashboard组件内部呈现 witch 不会呈现，因为 URL 不是“.../”仪表板”。

从中删除exact关键字<Route path="/dashboard" component={Dashboard} />应该可以修复您的代码。