当路由参数中存在散列时，响应路由

Question

所以我有一个应用程序，你可以在汽车之间导航。所有的汽车都有一个ID，有些汽车有一个带有散列的ID，例如'test#car#1‘。这似乎破坏了导航，因为当ID包含#符号时，导航就无法工作。

我已经创建了，其中有一个#在路由中，而导航到该特定的路由不起作用。

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里面使用#？

Answer 1

我看了你的CodeSandbox，这是固定的

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

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

错误的发生是因为encodeURIComponent对/进行了编码，导致了路由导向的混乱。将/移到外部，修复问题。虽然我不知道你为什么要用那样的路线名