在reactjs中访问参数后如何隐藏Route中的参数

Question

我已经创建了基本的 React 应用程序，我在其中创建了一个组件。当模式匹配时，组件会被加载。

<HashRouter>
    <Route path='/:id1/:id2' component={withRouter(component_name)}/></HashRouter>

当我运行应用程序时，网址看起来： http://localhost:4000/#/1/2

现在在我的组件中，我可以通过 this.props.match.params.id1 读取参数。从 url 读取参数后，我想从 url 中隐藏它，应该如下所示。 http://本地主机:4000/#/

有人可以帮我解决这个宝贵的答案吗？

提前致谢。

Answer 1

您可以使用路由器状态传递参数，而不必从 url 中删除参数，例如，如果您使用链接重定向，您可以执行类似的操作

<Link to={{
  pathname: '/',
  state: { params: {id1: value1, id2: value2} }
}}> My Link </Link>

然后在使用路由器路由的组件中，您可以获取它们，如下所示：

this.props.location.state.params.id1
this.props.location.state.params.id2

通过这种方式，您就无需从 url 中删除路径参数

更新

如果您需要在浏览器中匹配 url，您可以使用中间路由来提取参数，然后重定向到正确的组件，例如：

<Route
   path="/test/:id1/:id2"
   component={({ match }) => {
     return <Redirect to={{ path: '/component-route', state: {...match.params}}} />;
   }}
 />

这样，路由器将匹配第一个 url，然后重定向到另一个组件，通过状态传递传递参数。这样你就可以像我上面提到的那样访问状态参数。

希望能帮助到你