React-router Basename 也允许没有 basename 的路由

Question

我希望我的应用程序从子目录（例如 localhost:3000/base ）提供服务，以便路由 page1 和 page2 在 localhost:3000/base/page1 和 localhost:3000/base/page2 提供服务

为此，我尝试在 React Router 中使用基本名称。

有用。

然而，只有 localhost:3000/page1 也匹配 page1 组件，并且 page2 也匹配。

我该如何防止这种情况发生？

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";


function App() {
  return (
    <>hi
    <Router basename="/base">
      <Switch>
        <Route path="/page1" render={props => <div>Hello</div>} />
        <Route path="/page2" render={props => <div>Hi</div>} />
      </Switch>
    </Router>
    </>
  );
}


export default App;

Answer 1

我包含了react-router-dom并添加到BrowserRouter basename =“/Recidiviz-site”

import {BrowserRouter} from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter basename = "/Recidiviz-site">
      <App/>
  </BrowserRouter>

);