gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 07:31:19 25 4
gpt4 key购买 nike

我希望我的应用程序从子目录提供服务,比如 localhost:3000/test ,这样路由 tab1tab2 服务于 localhost:3000/test/tab1localhost: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);

最佳答案

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

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

关于reactjs - 具有基本名称的 react 路由器也匹配没有基本路径的路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51900724/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com