路由器外部的链接

Question

我正在测试我的React应用程序，我的视图中出现了所有Link React路由器dom的错误。

索引.js

import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
function App({props}) {
return (
<div>
<Navbar />
<Switch>
<Route path="/" exact component={Homepage} appProps={props}/>
<Route path="/accueil" exact component={Homepage} appProps={props}/>
<Route component={Error} />
</Switch>
<Footer />
</div>
);
}
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("fatboar")
);

主页.js

import { Link } from 'react-router-dom';
export default function Homepage(props) {
return ( 
<Link to="/ajouter-ticket" className="primary-btn mt-5">Je participe</Link>
)
}

我的链接是如何在路由器之外的？

Answer 1

链接导航到/ajouter ticket，正如我从您的代码中看到的那样，您从未将路由放置到此链接，因此您导航到错误组件如果你读了react路由器dom文档您将看到，当您导航到"切换路由"中未定义的内容时，转到"没有路径的路由"React Router Dom Doc

<Route path="/ajouter-ticket" exact component={SomeComponent} appProps={props}/>

还有，为什么你必须选择主页的路线？