代码之家 › 专栏 › 技术社区 › Evanss

使交换机组件与React路由器尊重URL片段?

react-router

Evanss · 技术社区 · 6 年前

这很管用:

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

但是,这始终会呈现组件3:

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

1 回复 | 直到 6 年前

zsgomori 6 年前

组成部分三

你说得对,你应该用 哈希路由器 由包裹。基于 documentation ,在您的情况下,适当的配置应该与此类似:

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>

不幸的是路径道具应该和以前一样。

文档还包含路由器在这种情况下如何创建href链接的示例。

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

2 年前

Tesh Aych · react axios URL连接返回404未找到

2 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

2 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

2 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

2 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

2 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

2 年前

Ancross · 链接未路由到组件

2 年前