Не работают ли вложения маршрутов вместе с избыточной интеграцией?

Question

Я вложил маршруты в свой проект.У меня есть App.js, в котором я определил маршруты, и внутри компонента у меня есть больше маршрутов, которые я хочу, чтобы они были вложенными.Единственная проблема заключается в том, что мой вложенный маршрут находится в компоненте, который связан с Redux.Вложенная маршрутизация не работает должным образом.

Я уже пробовал ее из официальной документации, но она не работает.

https://reacttraining.com/react-router/core/guides/philosophy

App.js

import { connect } from "react-redux";
import { withRouter, Route } from "react-router-dom";

function HowItWorks() {
  return (
    <div>
      <h2 style={{ margin: 20 }}>How It Works</h2>
    </div>
  );
}

function AboutUs() {
  return (
    <div>
      <h2 style={{ margin: 20 }}>About Us</h2>
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
          <div>
            <Route path="/" exact component={HowItWorks} />
            <Route path="/howitworks" exact component={HowItWorks} />
            <Route path="/aboutus" component={AboutUs} />
            <Route path="/admin" component={AdminContainer} />
          </div>
    );
  }
}

Ниже приведен мой файл Redux Container, который вызывается на основе маршрута, указанного в App.js.Также в будущем мой файл App.js может быть подключен к redux с помощью метода connect ().

AdminContainer.js

import { connect } from "react-redux";
import MainDesktopComponent from "../components/Admin/MainDesktopComponent";

const mapStateToProps = state => ({});

const mapDispatchToProps = dispatch => {
  return {};
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MainDesktopComponent);

MainDesktopComponent.js

У меня естьпопробовал это, т.е. дал вложенный маршрут внутри Switch и много разных способов, но он не работает.Также обратите внимание, что я также хочу передать реквизиты компоненту Dashboard, которые будут поступать из вышеуказанного компонента-контейнера-редукса через mapstatetoprops.

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

function MainDesktopComponent(props) {
  return (
    <div>
      <Switch>
        <Route
          exact
          path="/admin/dashboard"
          render={props => {
            <Dashboard/>;
          }}
        />
      </Switch>
    </div>
  );
}

export default MainDesktopComponent;

Answer 1

Я не уверен, но как насчет того, чтобы попробовать это?

<Switch>
      <Route
          exact
          path="/admin/dashboard"
          render={cProps => <Dashboard {...cProps} {...props} />}
      />
</Switch>

возврат компонента визуализации маршрута.