Javascript 反应：如何从URL获取变量？

我正在构建一个应用程序，它需要根据URL中提供的slug从数据库加载“工作区”。我的URL结构是

/app/

。目前，每个工作区有3个视图：地图、列表和设置。我需要从URL获取

的值，以便从数据库加载正确的工作区。如果找不到工作区，我还需要返回一个错误

我是个新手，所以我目前可能没有遵循最佳实践

我的路线

目前，我通过在每个工作区中循环并为

App.js

中的3个视图中的每一个创建路由，来路由到每个工作区视图：

renderContent() {
    return (
        <Switch>
            <Route path="/" component={NetworkMap} exact />
              {this.state.workspaces.map(function(workspace, index){ // Map View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/map"} render={(props) => <Workspace {...props} workspace={workspace} component={Map} />} />
                );
              })}
              {this.state.workspaces.map(function(workspace, index){ // List View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/list"} render={(props) => <Workspace {...props} workspace={workspace} component={List} />} />
                );
              })}
              {this.state.workspaces.map(function(workspace, index){ // Settings View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/settings"} render={(props) => <Workspace {...props} workspace={workspace} component={WorkspaceSettings} />} />
                );
              })}
            <Route component={Error} />
        </Switch>
    );
}

通过

渲染

道具渲染的组件也将被传递到一些路由道具，具体来说，

匹配

是您想要的。从那里

props.match.params.slug将是您想要的slug值

{this.state.workspaces.map(function(workspace, index){
  return (
    <Route
      path="/app/:slug/map"
      render={props => (
        <Workspace
          {...props}
          workspace={workspace}
          component={Map}
          slug={props.match.params.slug}
        />
      )}
    />
  );
})}

{this.state.workspaces.map（函数（工作区，索引）{
返回(
(
)}
/>
);
})}

匹配
也可以通过
道具中的排列
在组件
工作区内访问。如果
Workspace
是一个功能组件，react router dom也有一个钩子。
感谢您的响应。听起来方向正确，但是这是在我的App.js组件中，使用
this.props.match.params.slug
会产生错误
TypeError:无法读取未定义的属性“params”
我可能缺少导入语句吗？@Brack No，它们是任何
路由
传递给
渲染
道具渲染的任何内容。介意分享一下你的
路由器
在
App.js
中的代码是什么样子的吗？呃，对不起，我想我假设你在使用react路由器dom。您使用的导航是什么？我更新了路由器部分以包含所有路由代码。我正在使用react router dom
从“react router dom”导入{Route，Switch}
<BrowserRouter>
    <App />
</BrowserRouter>

{this.state.workspaces.map(function(workspace, index){
  return (
    <Route path={"/app/:slug/map"} render={(props) => <Workspace {...props} workspace={workspace} component={Map} />} />
  );
})}

{this.state.workspaces.map(function(workspace, index){
  return (
    <Route
      path="/app/:slug/map"
      render={props => (
        <Workspace
          {...props}
          workspace={workspace}
          component={Map}
          slug={props.match.params.slug}
        />
      )}
    />
  );
})}