reactjs - 具有基本名称的 react 路由器也匹配没有基本路径的路由

Question

我希望我的应用程序从子目录提供服务，比如 localhost:3000/test ， 这样路由 tab1 和 tab2 服务于 localhost:3000/test/tab1 和 localhost:3000/test/tab2

为此，我尝试在 React Router 中使用 basename。

有效。

然而，只有 localhost:3000/tab1 也匹配 tab1 组件，同样适用于 tab2。

如何防止这种情况发生？

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

import "./styles.css";

function App() {
  return (
    <Router basename="/test">
      <Switch>
        <Route path="/tab1" render={props => <div>Hello</div>} />
        <Route path="/tab2" render={props => <div>Hi</div>} />
      </Switch>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

router basename 是为 react-router 的 Link 组件而不是 Route 组成的。

<Link to="/tab1"/> 
// <a href="/test/tab1">