React：如何从 URL 获取变量？

Question

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

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

我的路线

目前，我正在通过遍历每个工作区并为 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.workspaces.map(function(workspace, index){
  return (<Link key={index} to={"/app/" + workspace.slug + "/map"} className="dropdown-item cursor-pointer">{workspace.name}</Link>);
})}

我的Index.js

<BrowserRouter>
    <App />
</BrowserRouter>

我已经尝试将路线路径中的 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 将是您想要的 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 也可以通过 props 中的传播在组件 Workspace 内访问。如果 Workspace 是功能组件，react-router-dom 也有一个 useParams hook.

React：如何从 URL 获取变量？

React: How to get variable from URL?

javascript

url

routing

reactjs