Question

我希望从子目录localhost:3000/test提供我的应用程序，因此，路由tab1和tab2在localhost:3000/test/tab1和localhost:3000/test/tab2

处服务

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

有效。

但是，仅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

路由器基本名称是为react-router的Link组件而不是Route组成的。

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

Answer 2

只要react-router不支持此功能，您就需要使用

<q-card v-ripple class="my-box cursor-pointer q-hoverable"> <span class="q-focus-helper"></span> <q-card-section> ... </q-card-section> </q-card>

本期https://github.com/ReactTraining/react-router/issues/6777

中介绍了更多详细信息

具有基本名称的React Router也匹配没有基本路径的路由

2 个答案: