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

Question

我正在构建一个应用程序，该应用程序需要根据URL中提供的代码从数据库加载“工作区”。我的URL结构是/app/<workspace slug>/<workspace view>。当前，每个工作区有3个视图：“地图”，“列表”和“设置”。我需要从URL获取<workspace slug>的值，以便从数据库中加载正确的工作区。如果找不到工作空间，我还需要返回一个错误。

我对React还是很陌生，所以我目前可能没有遵循最佳实践。

我的路由

当前，我通过遍历每个工作区并为3个视图中的每一个创建路由来路由到每个工作区视图：

{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} />} />
  );
})}

我的链接

{props.workspaces.map(function(workspace, index){
  return (<Link key={index} to={"/app/" + workspace.slug + "/map"} className="dropdown-item cursor-pointer">{workspace.name}</Link>);
})}

我曾尝试在路线的路径中将workspace.slug更改为:slug，我认为应该使它出现在道具中，但似乎无法正常工作：

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

Answer 1

match

通过render道具渲染的组件也会通过一些路线道具，特别是match是您想要的。从那里props.match.params.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}
        />
      )}
    />
  );
})}

match也可以通过Workspace中的扩展名在组件props中进行访问。如果Workspace是功能组件，则react-router-dom也具有useParams钩子。