вложенные маршруты в реакции не отображают вложенный компонент

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;

MainDashboard.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} в качестве нашего "базового маршрута" и добавьте наши суб-маршруты как 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>
    );
  }
}