javascript - React:如何从 URL 获取变量?
问题描述
我正在构建一个需要根据 URL 中提供的 slug 从数据库加载“工作区”的应用程序。我的 URL 结构是/app/<workspace slug>/<workspace view>
. 目前每个工作区有 3 个视图:地图、列表和设置。我需要<workspace slug>
从 URL 中获取值,以便从数据库中加载正确的工作区。如果找不到工作区,我还需要返回错误。
我对 React 很陌生,所以我目前可能没有遵循最佳实践。
我的路由
目前,我通过遍历每个工作区并为以下 3 个视图中的每一个创建一个路由来路由到每个工作区视图App.js
:
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
Route 的路径,我认为应该让它出现在道具中,但我似乎无法让它正常工作:
{this.state.workspaces.map(function(workspace, index){
return (
<Route path={"/app/:slug/map"} render={(props) => <Workspace {...props} workspace={workspace} component={Map} />} />
);
})}
解决方案
通过 prop 渲染的组件render
也会传递一些 route props,具体来说,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
也可以Workspace
通过在props
. 如果Workspace
是功能组件,react-router-dom 也有一个useParams
钩子。
推荐阅读
- javascript - 如何(真正)防止移动设备上的捏缩放
- google-bigquery - 为什么 BigQuery 会扫描整个表,尽管它是按小时分区的?
- xcode - AddressSanitizer 在 MacOS Mojave 上使用 Chromium Embedded Framework 引发崩溃
- database - 从 json 中提取唯一值的 SQLite 查询
- python-3.x - 如何在 python 3 中使用列表理解同时接受来自用户的不同数据类型
- ruby - 我可以在 Ruby 方法中访问隐式 Proc 中定义的方法吗?
- android - Android-我尝试使用意图将数据从一个活动发送到另一个活动
- python - 访问 localhost:8000/sitemaps.xml 时出现 XML 错误 | 姜戈
- javascript - COdility 标志解决方案
- python - 比较两个 csv 文件并创建第三个列匹配的文件