时间戳

首页 > 解决方案 > 路由器外的链接

reactjs - 路由器外的链接

问题描述

我测试了我的 React 应用程序，并且在我的视图中我有一个所有 Link react router 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>
  )
}

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

标签： reactjsreact-router-dom

解决方案

该链接导航到/ajouter-ticket，正如我从您的代码中看到的那样，您从未将路由放置到此链接，因此您导航到错误组件，如果您阅读 react-router-dom 文档，您会看到当您导航到 Switch Route 中未定义的内容 转到没有路径的 Route React Router Dom Doc

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

另外，为什么你必须路由到主页？

推荐阅读