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

Question

我有两个组件，App 和 Dashboard

App 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&nbsp;exact&nbsp;path="/dashboard"&nbsp;component={Dashboard}/>通过这段代码片段，您基本上可以说，仅当 URL 地址恰好为“.../dashboard”时，才应呈现仪表板组件。<Route&nbsp;path={`${this.props.match.url}/blogs`}&nbsp;exact={true}&nbsp;component={BlogList}&nbsp;/>使用你说的这个代码片段，BlogList只有当 URL 恰好是“.../dashboard/blogs/”时才应该呈现该组件，但它在Dashboard组件内部呈现 witch 不会呈现，因为 URL 不是“.../”仪表板”。从中删除exact关键字<Route path="/dashboard" component={Dashboard} />应该可以修复您的代码。