如何将旧的react-router HashRouter（带有#）重定向到BrowserRouter？

Question

我们将react-router-doms替换HashRouter为BrowserRouter并希望将旧路由重定向到新路由。我标记是nginx因为我不介意在那里进行重定向。:)

假设我们有一条旧路由/#/usersand /#/users:id：它们应该匹配并重定向到/usersand /users/:id。

到目前为止我尝试过( react-router-dom v5.0.1)：

<Router>
  <Switch>
    <Route path='/users' component={UsersComponent} />
    <Route path='/users/:id' component={UsersDashComponent} />
  </Switch>
  <Redirect from='/#/users' to '/users' />
  <Redirect from='/#/users/:id' to='/users/:id' />
</Router>

第一条路线匹配并重定向良好。第二个（带有id）是有问题的。当我导航到它时/#/users/123，它会重定向到/users/:id. 它将实际替换123为:id.

这是路线的两个示例。我们还有更多参数可以重定向。

Answer 1

老实说，这些解决方案都不适合我，我想执行从以前的所有路由到新路由的重定向，而无需#.

虽然接受的答案在大多数情况下应该没问题，但我也在处理 404，这种重定向不会真正捕获它。

最终在渲染我的交换机之前添加了一个与 React Router 历史交互的守卫：

function App() {
  const history = useHistory()

  if (location.hash.startsWith('#/')) {
    history.push(location.hash.replace('#', '')) // or history.replace
  }

  return (
    <Switch>
      <Route path="/" exact component={ Home } />
      ...
      <Route path="*" component={ PageNotFound } />
    </Switch>
  )
}

Answer 2

这是我的解决方案：

<Router>
  <Switch>
    <Route path='/users' component={UsersComponent} />
    <Route path='/users/:id' component={UsersDashComponent} />
    <Route exact path='/' render={({ location }) => <Redirect to={location.hash.replace('#', '')} />} />
  </Switch>
</Router>

只有具有 的路线/#才会匹配/。如果需要在根上渲染某些内容，可以轻松添加条件。