大佬教程收集整理的这篇文章主要介绍了如何在父路径组件中获取参数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
@Kyle从技术角度很好地解释了这个问题。我将只专注于解决该问题。
您可以@H_186_5@matchPath用来获取ID所选项目。
- https: **//reactTraining.com/react- router/web/API/matchPath**
这种情况下的用法非常简单。
// history is one of the props passed by react-router to component
// @link https://reactTraining.com/react-router/web/API/history
const match = matchPath(history.LOCATIOn.pathname, {
// You can share this String as a constant if you want
path: "/articles/:ID"
});
let articlEID;
// match can be null
if (match && match.params.ID) {
articlEID = match.params.ID;
}
articlEID在渲染中使用{articlEID && (
<h1>You SELEcted article with ID: {articlEID}</h1>
)}
我构建了一个简单的演示，您可以用来在项目中实现相同的功能。
https //codesandbox.io/s/pQo6ymZop
我认为该解决方案非常优雅，因为我们使用了官方react-
routerAPI，该API也用于路由器中的路径匹配。我们也不window.LOCATIOn在这里使用，因此如果您还导出原始组件，则测试/模拟将很容易。
我正在使用React，React-Router（v5）和Redux构建一个应用程序，想知道如何在父路由中访问当前URL的参数。
那是我的条目，router.js：
<Wrapper>
<Route exact path="/login" render={(props) => (
<LoginPage {...props} entryPath={this.entryPath} />
)} />
<Route exact path="/" component={UserIsAuthenticated(HomePagE)} />
<Route exact path="/about" component={UserIsAuthenticated(AboutPagE)} />
<Route path="/projects" component={UserIsAuthenticated(ProjectsPagE)} />
</Wrapper>
这就是我的ProjectsPage组成部分：
class ProjectsPage extends PureComponent {
componentDidMount() {
this.props.fetchProjectsrequest()
}
render() {
console.log(this.props.activE)
if (this.props.loading) {
return <Loading />
} else {
return (
<Wrapper>
<Sidebar>
<ProjectList projects={this.props.projects} />
</Sidebar>
<Content>
<Route exact path="/projects" component={ProjectsDashboarD} />
<Switch>
<Route exact path="/projects/new" component={ProjectNew} />
<Route exact path="/projects/:id/edit" component={ProjectEdit} />
<Route exact path="/projects/:id" component={ProjectPagE} />
</Switch>
</Content>
</Wrapper>
)
}
}
}
const enhance = connect(
(state,props) => ({
active: props.match,loading: projectSELEctors.loading(statE),projects: projectSELEctors.projects(statE)
}),{
fetchProjectsrequest
}
)
export default withRouter(enhance(ProjectsPagE))
问题是，尽管URL为，但console.log我render方法的输出{"path":"/projects","url":"/projects","isExact":false,"params":{}}是http://localhost:3000/projects/14。
我想添加一个ID道具ProjectList以突出显示当前选择的项目。
我可以将项目的ID保存在ProjectPage组件内部的存储区中，但是我认为这会有些混乱，尤其是因为URL实际上具有信息–那么为什么要在存储区中写一些东西呢？
另一种（不好的？）方法是我自己解析位置对象以获取ID，但是我认为目前有一种react-router/ react-router-
redux方法可以获取我忽略的参数。
以上是大佬教程为你收集整理的如何在父路径组件中获取参数全部内容，希望文章能够帮你解决如何在父路径组件中获取参数所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。