将变量从一个类发送到 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，它保存了用户单击的子项目的名称。我想将此变量从我的 Projects 类传递给我的 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 设置为状态变量的默认值，并且在状态变量更改时不会更新。

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

谢谢

Answer 1

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

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

你可以通过history.push("/projects" + this.state.clickedSubprojectName)调用这条路由

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

这绝对行不通。这个变量被导出一次并导入一次。所以它总是会返回默认值。