Question

我在我的应用程序中使用React Router v4进行路由。我唯一的问题是从一条路线导航到另一条路线时忽略查询参数。有没有办法只替换路径并保留查询参数。

以下是我的代码：

<Switch>
  <Route exact path="/" component={() => <Redirect to="/Route1" />}/>
  <Route exact path='/Route1' component={Route1Comp} />
  <Route path='/Route1/:channel/:id?'
    render={(routeProps) => (
      <AppMain {...routeProps} />
    )}
  />
  <Route exact path='/Route2' component={Route2Comp} />
</Switch>

我需要该应用有一个查询参数?isDev=true，并希望保留。目前，如果我在localhost:3000/Route1Comp?isDev=true并使用Route2Comp导航至Link，则会将整个路径与查询参数一起替换。

Answer 1

您可以从react-router扩展Link组件，默认情况下包括搜索参数，如

const ExtendedLink = ({ to, children, location}) => {
   return <Link to={{
               pathname: to,
               search: location.search
          }}>{children}</Link>
}

export default withRouter(ExtendedLink)

然后使用它代替Link

<ExtendedLink to='/Route1'>Route 1</ExtendedLink>

React router v4 - 在导航时保留查询参数

1 个答案: