Question

如何使用React Router进行哈希路由？

这很好：

return (
      <div>
        <div>
          <Link to="/one">One</Link>
          <Link to="/two">Two</Link>
        </div>
        <Switch>
          <Route exact path="/one" component={One} />
          <Route exact path="/two" component={Two} />
          <Route component={Three} />
        </Switch>
      </div>
    );

但是，它始终呈现组件三：

return (
      <div>
        <div>
          <Link to="/#one">One</Link>
          <Link to="/#two">Two</Link>
        </div>
        <Switch>
          <Route exact path="/#one" component={One} />
          <Route exact path="/#two" component={Two} />
          <Route component={Three} />
        </Switch>
      </div>
    );

我需要哈希路由器吗？我觉得文档不太清楚：

https://reacttraining.com/react-router/web/api/HashRouter

Answer 1

呈现

Component Three 的原因是，当没有匹配给定URL的路由点时，这就是默认组件。

是的，您应该使用 react-router-dom 软件包提供的 HashRouter 。根据{{3}}，适当的配置应与您的情况类似：

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

<HashRouter basename="/" hashType="noslash">
   <App />
</HashRouter>

因此，根路径更改为 /＃。

坚持您的示例：

<div>
   <div>
      // http://localhost:3000/#one
      <Link to="/#one">One</Link> // This can be either /one or /#one
      <Link to="/#two">Two</Link>
   </div>
   <Switch>
      <Route exact path="/one" component={One} />
      <Route exact path="/two" component={Two} />
      <Route component={Three} />
   </Switch>
</div>

不幸的是， path 道具应该与以前的一样。

文档中还包含一个示例，说明在这种情况下路由器如何创建href链接。

使用React Router使Switch组件尊重URL片段？

1 个答案: