Question

我正在尝试使用React Router v4实现浏览器路由器。我的项目网址为“http://localhost:8080/Project/reactjs/Main.html/SearchProduct”，下面是我如何设置路径路径。但是我得到的路线没有找到例外。任何帮助将不胜感激

const routers = (<BrowserRouter basename="/Project/reactjs/Main.html">
    <div>
      <ProductScreen/>
    </div>
  </BrowserRouter>);

render(routers, document.querySelector('.mainContainer'));

In Product Screen :
const ProductScreen = () => {
  return (
    <Switch>
      <Route
        exact
        path="/add"
        component={AddProduct}
      />
      <Route
        exact
        path="/SearchProduct"
        component={SearchProduct}
      />
    </Switch>
  );
};

Answer 1

我认为您的代码大部分都是正确的，但请尝试从exact中删除Route。正如documentation for <Route exact ... />所述：

true时，仅当路径与location.pathname 完全匹配时匹配。

这意味着整个路径，而不是BrowserRouter的相对路径。我使用basename而没有exact取得了成功，但我没有测试您的代码。

React-Router v4 - 浏览器路由器动态路由

1 个答案: