0

我正在尝试使 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}

然后import { clickedSubprojectName} from './views/Subproject'在我的 routes.js 中导入，但这并没有真正起作用。这会将 clickedSubprojectName 设置为第一次渲染 Projects 组件时状态变量的默认值，并且在状态变量更改时不会更新。

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

谢谢

4

1 回答 1

0

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

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

您可以通过以下方式调用此路线history.push("/projects" + this.state.clickedSubprojectName)

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

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

于 2020-04-03T11:56:58.683 回答