Question

我已经创建了基本的React Application，在其中我创建了一个组件。当模式匹配时，组件将获得负载。

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

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

现在在我的组件中，我可以通过this.props.match.params.id1读取参数。从url读取参数后，我想从url中隐藏它应该看起来像这样。 http://localhost:4000/#/

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

谢谢。

Answer 1

您发布的链接已绑定到您的本地网络，因此只有您自己，任何人都无法打开并查看它们。

Answer 2

无需从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中删除路径参数

更新

如果您需要在浏览器中匹配该网址，则可以使用一条中间路线来提取参数，然后将其重定向到正确的组件，例如：

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

通过这种方式，路由器将匹配第一个URL，然后重定向到另一个组件，该组件将通过参数传递给状态。这样，您可以访问我上面提到的状态参数。

希望有帮助

在React.js中访问参数后如何从Route隐藏参数

2 个答案: