Question

我们正在将react-router-dom的{{1}}替换为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。

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

Answer 1

我认为您导航时使用的是这样的

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

根据docs，

一个<Router>，使用URL的哈希部分（即window.location.hash）使您的UI与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相匹配。

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>

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

Answer 3

说实话，这些解决方案都没有真正为我服务，我想从所有以前的路由重定向到没有#的新路由。

虽然在大多数情况下可接受的答案应该是好的，但我也在处理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 4

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

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

4 个答案: