React - 当路由参数中有散列时进行路由

大佬教程收集整理的这篇文章主要介绍了React - 当路由参数中有散列时进行路由，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React - 当路由参数中有散列时进行路由？

所以我有一个应用程序，您可以在其中导航汽车。所有汽车都有一个 ID，有些汽车有一个带有哈希值的 ID，例如，'test#car#1'。这似乎破坏了导航，因为当 ID 包含 # 符号时它不起作用。

我创建了 an example in code sandbox，其中路线内部有 #，但无法导航到该特定路线。

class App extends Component {
  render() {
    return (
      <div>
        <nav classname="navbar navbar">
          <ul classname="nav">
            <li>
              <link to="/">Home</link>
            </li>
            <li>
              <link to="/category">category</link>
            </li>
            <li>
              <link to="/pro#ducts">Products</link> // the problematic route
            </li>
            <li>
              <link to="/admin">admin area</link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/login" component={Login} />
          <Route exact path="/" component={HomE} />
          <Route path="/category" component={Category} />
          <PrivateRoute path="/admin" component={admin} />
          <Route path="/pro#ducts" component={Products} /> // the problematic route
        </Switch>
      </div>
    );
  }
}

有什么办法可以解决这个问题吗？能够在汽车的 ID 中使用 # 吗？

解决方法

<li>
   <Link to={`/${encodeURIComponent("pro#ducts")}`}>Products</Link>
</li>

// Some other code
<Route path={`/${encodeURIComponent("pro#ducts")}`} component={Products} />

大佬总结

以上是大佬教程为你收集整理的React - 当路由参数中有散列时进行路由全部内容，希望文章能够帮你解决React - 当路由参数中有散列时进行路由所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。