React Router Dom 参数无法正常工作？

Question

这是我在路由配置上的代码：

<Switch>
   <Route exact path='/(home)?' component={TodoListHomePage} />
   <Route exact path='/profile/:userId' component={TodoListProfilePage} /> 
   <Route  path='/login' component={SignUpAndLogin} /> 
</Switch>

一切正常，但带有参数的路径很奇怪，第一次点击时它工作正常，路径例如

http://localhost:4000/Profile/597c1f43a87ca40d38f79a68

在第 2 次单击时，它会像这样连接配置文件：

http://localhost:4000/Profile/Profile/597c1f43a87ca40d38f79a68

并在例如

http://localhost:4000//Profile/Profile/Profile/Profile/597c1f43a87ca40d38f79a68

这是我在点击配置文件 link 时调用的函数：

handleProfileClick = (e, {name}) => {
      this.setState({ activeItem: name }); 
      this.props.history.push(name.concat('/'.concat(this.props.viewer._id.toString())));
}

Answer 1

您正在使用相对路径。在拼接前加一个/就可以了。

handleProfileClick = (e, {name}) => {
      this.setState({ activeItem: name }); 
      this.props.history.push("/profile/" + this.props.viewer._id.toString());
}

React Router Dom 参数无法正常工作？

React Router Dom with parameter not working properly?

javascript

react-router

react-router-dom