时间戳

首页 > 解决方案 > 嵌套路由和 redux 集成不起作用？

reactjs - 嵌套路由和 redux 集成不起作用？

问题描述

我在我的项目中嵌套路由。我有 App.js，我在其中定义了路由，并且在组件内部我有更多希望它们嵌套的路由。唯一的问题是我的嵌套路由在连接到 redux 的组件中。嵌套路由无法正常工作。

我已经从官方文档中尝试过，但它不起作用。

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

应用程序.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 文件将来可能会通过 connect() 方法连接到 redux。

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 中提供嵌套路由和许多不同的方式，但它不起作用。另请注意，我还想通过 mapstatetoprops 将来自上述 redux 容器组件的道具传递给仪表板组件。

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;

标签： reactjsreact-reduxreact-routerreact-router-v4react-router-dom

解决方案

我不确定，但试试这个怎么样？

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

返回路由渲染组件。

推荐阅读