将变量从一个 class 发送到 routes.js （没有道具）

Question

我正在尝试使 React 路由路径动态化，为此我需要将变量 clickedSubprojectName 发送到我的 routes.js。

现在我的 routes.js 看起来像这样：

import React from 'react';

const Projects = React.lazy(() => import('./views/Projects'));
const Subproject= React.lazy(() => import('./views/Subproject'));

const routes = [
  { path: '/projects', exact: true, name: 'Projects', component: Projects },
  { path: "/projects/subprojects", name: 'Subproject', component: Subproject},

];

export default routes;

在我的 Projects.js 中，我创建了一个 state variable 来保存用户单击的子项目的名称。我想将此变量从我的项目 class 传递到我的 routes.js 以便我可以在路由中设置路径，例如：

{ path: "/projects/"+clickedSubprojectName, name: 'Subproject', component: Subproject}

我已经尝试从我的 Projects.js 中导出常量变量，如下所示：

    export const clickedSubprojectName={
      clickedSubprojectName: this.state.clickedSubprojectName}

然后在我的 routes.js 中导入 import { clickedSubprojectName} from './views/Subproject' 但这并不是真的有效。这会在 Projects 组件首次呈现时将 clickedSubprojectName 设置为状态变量的默认值，并且在状态变量更改时不会更新它。

希望有人能解决这个问题，因为我还没有在 Whosebug 上找到任何东西

谢谢

Answer 1

对于动态路由..你可以使用类似..

{ path: "/projects/:subproject", name: 'Subproject', component: Subproject},

您可以通过 history.push("/projects" + this.state.clickedSubprojectName)

调用此路由

export const clickedSubprojectName={
      clickedSubprojectName: this.state.clickedSubprojectName}

这肯定行不通.. 这个变量导出一次，导入一次。所以它总是 return 默认值。

将变量从一个 class 发送到 routes.js （没有道具）

Send variables from one class to routes.js (without props)

routes

reactjs

react-router

core-ui