当前位置: 首页 > 知识库问答 >
问题:

嵌套路线和redux集成不起作用?

阎建德
2023-03-14

我是嵌套路线在我的项目。我有一个pp.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容器文件,它根据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

我已经尝试过这种方法,即在交换机内部提供嵌套路由和许多不同的方法,但它不起作用。还请注意,我还希望通过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;

共有1个答案

何禄
2023-03-14

我不确定,但是试试这个怎么样?

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

返回路由渲染组件。

 类似资料:
  • 问题内容: 我的目标是让http:// mydomain / route1 渲染React组件Component1和http:// mydomain / route2 渲染Component2。因此,我认为编写如下的路由是很自然的: http:// mydomain / route1可以正常工作,但http:// mydomain / route2却呈现Component1。 然后,我阅读了此问题

  • 问题内容: 建立一个多步骤表单(“向导”)。最初是按照本教程进行的,该教程效果很好,但是现在尝试对其进行调整,因此第一步已嵌入首页中,而不是单独的状态。无论我做什么,我都无法创建一条可行的路径。我总是得到: 无法从状态“ home”解析“ .where” 要么 无法从状态“家”解析“ wizard.where” 要么 无法从状态“ home”解析“ wizard.where @” …即使在中效果很

  • 我有一个问题,在laravel的新路线不工作,网址显示正确的路线,但几乎好像它没有得到我的路线Web文件只是返回页面没有找到每次。 我尝试过:使用命名路由,移动功能到不同的控制器,清除路由缓存,清除应用缓存,自卸自动加载,确保AllowOveride设置为所有, 网状物php: 控制器: 查看文件名:coursestatistics。刀身php文件结构视图/课程统计 链接至第页: 有人能告诉我是什

  • 无法使用语法来代替 它看起来像这样: 但是当我使用@Connect装饰器使事物更干净时,我没有得到任何在我的状态中列出的东西。 突然之间,它不知何故实际上并不连接事物: 我做错了什么,我看到每个人都在使用的神奇的@Connect装饰器的正确使用方法是什么? 其余的代码,以防万一,以@connect的形式;

  • 问题内容: 我里面有一个带有超链接标签的,看起来像这样: 这在Chrome和Safari中效果很好,但在Firefox(已测试20版)中不起作用。 怎么了? 问题答案: 为了使其在所有浏览器中都能正常工作,Firefox也必须将其更改为 或如Billy Moat所建议的那样进行引导,则无需您做

  • 问题内容: 按钮1位于更新面板之外,当用户在上传框中添加文件时运行的javascript是这样的: 问题很简单。 FileUpload1.HasFile ==否。我不知道为什么会这样,但是当我将其放在更新面板中时,它将停止工作。 我已经看到了其他一些线程。但是他们都没有回答为什么会发生这种情况,他们只是指向您可以下载的内容。 编辑:确实,我想要这样做的主要原因是,我可以获取一个..Uploadin