反应中的嵌套路由不会呈现嵌套组件

Question

App.tsx

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";
import Dashboard from "./components/dashboard";
import "./App.css";

class App extends React.Component {
  public render() {
    return (
      <Router>
        <Switch>
          <Route path="/dashboard" component={Dashboard} />
          <Redirect path="/" to="/dashboard/home" />
        </Switch>
      </Router>
    );
  }
}

export default App;

Dashboard.tsx

import React from "react";
import { Switch, Route } from "react-router-dom";
import MainDashboard from "./MainDashboard";

class Dashboard extends React.Component {
  public render() {
    return (
      <div>
        <div>Dashboard</div>
        <Switch>
          <Route path="/dashboard/home" Component={MainDashboard} />
        </Switch>
      </div>
    );
  }
}

export default Dashboard;

主要Dashboard.tsx

import React from "react";

class MainDashboard extends React.Component {
  public render() {
    return (
      <div>
        MainDashboard
      </div>
    );
  }
}

export default MainDashboard;

有嵌套路线。第一个是 App.tsx 中的父路由，然后是 Dashboard.tsx 中的嵌套路由。预期结果是使用 /dashboard/home 将呈现 MainDashboard 组件。但是没用。

Answer 1

要创建嵌套路由，我们需要使用 match.url 并为我们要呈现的内容添加一些检查，react-router-dom 会将 match 对象注入为 this.props。

我们使用 exact path={match.url} 作为我们的 "base route" 并添加我们的子路由 path={`${match.url}/:sectionNAme`}

class App extends React.Component {
  public render() {
    return (
      <Router>
        <Switch>
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/" render={() => <Redirect to="/dashboard/home" />} />
        </Switch>
      </Router>
    );
  }
}

class Dashboard extends React.Component {
  public render() {
    const { match } = this.props;
    return (
      <div>
        <Route exact path={match.url} render={() => <div>Dashboard</div>} />
        <Route path={`${match.url}/home`} component={MainDashboard} />
      </div>
    );
  }
}

class MainDashboard extends React.Component {
  public render() {
    return (
      <div>
        MainDashboard
      </div>
    );
  }
}

反应中的嵌套路由不会呈现嵌套组件

nested routes in react does not render nested component

reactjs

react-router-dom