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

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

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

Согласно документы,

A <Router> that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.

При использовании HashRouter вам не нужно добавлять # вручную, маршрутизатор React автоматически добавляет # в 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.

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

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

Только маршруты, имеющие /#, будут соответствовать /. Можно легко добавить условие, если необходимо отобразить что-то в корне.

Честно говоря, ни одно из этих решений мне не помогло, я хотел выполнить перенаправление со всех моих предыдущих маршрутов на новые без #.

Хотя принятый ответ должен подойти для большинства случаев, я также обрабатываю 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>
  )
}

export const history = createBrowserHistory();

export const App: FC = () => {
   return (
     <Router history = {history}>
       <Switch>
        <Route path = "/settings" exact component = {Settings} />
       </Switch>
     </Router>
  );
};


export const Settings : FC = () => {
   return (
      <HashRouter basename = "/" hashType = "noslash">
        <Switch>
              <Route path = "/profile">
                <Profile />
              </Route>
       </Switch>
    </HashRouter>
  );
};

 import {history} from "./App.tsx";

 export const Profile : FC = () => {
      return (
        <Router history = {history}>
           <Link to = "/product/1"/>
        </Router>
       );
    };

  // It's simple store your history in a variable and make use of it