Как перенаправить старый реагирующий маршрутизатор HashRouter (с #) на BrowserRouter?

Question

Мы заменяем react-router-dom s HashRouter на BrowserRouter и хотели бы перенаправить старые маршруты на новые.Я пометил nginx, потому что я не против делать там перенаправления.:)

Допустим, у нас есть старый маршрут /#/users и /#/users:id: они должны совпадать и перенаправляться на /users и /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

Вот мое решение:

<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>

Только маршруты с /# будут соответствовать /. При необходимости можно легко добавить условное выражение для рендеринга чего-либо в корне.

Answer 2

Я думаю, что для навигации вы используете что-то вроде этого,

<Link to="/#/users" />
<Link to="/#/users/123" />

В соответствии с документами ,

A <Router>, который использует хэшчасть URL (т. е. window.location.hash), чтобы синхронизировать пользовательский интерфейс с URL.

При использовании HashRouter вам не нужно вводить # вручную. Реагировать на маршрутизатор автоматическидобавляет # в URL

Итак, ваши маршруты должны быть,

import { HashRouter } from 'react-router-dom'


<HashRouter>
  <Switch>
    <Route exact path='/users' component={UsersComponent} />
    <Route exact path='/users/:id' component={UsersDashComponent} />
  </Switch>
</HashRouter>

И ссылки должны быть,

<Link to="/users" />
<Link to="/users/123" />

Теперь перейдем к вашему вопросу, какзаменить HashRouter на BrowserRouter?

Для этого вам просто нужно сделать это,

import { BrowserRouter } from 'react-router-dom'


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

И ваши ссылки должны быть такими же.

Примечание: Также посмотрите, что я добавил exact к route, оно будет точно соответствовать path.