路由器外的链接答案

【问题标题】：Link outside of Router路由器外的链接
【发布时间】：2020-09-18 21:38:22
【问题描述】：

我测试了我的 React 应用程序，但我的视图中出现了所有 Link react router dom 的错误。

Index.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")
);

Homepage.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>
  )
}

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

【问题讨论】：

如何渲染导致错误的“测试”组件？当您说“测试”时，您是指实际单元测试，还是只是在浏览器中测试一些 UI？
是的，当你测试一个 React Router Dom 时，一个只有一个链接的页面。他不运行上下文。然后我需要给他一个路由器在测试是好的。没关系，我找到了解决方案；）谢谢回复
是的，当测试应用程序中通常在Router 中呈现的组件时，您还需要在单元测试中提供或包装它（对于任何其他提供程序也是如此，例如 redux ，主题等...）。 IDK 你正在使用什么测试框架，但是 react-testing-library 非常适合这个。很容易创建自己的模拟 HOC 包装器集合（甚至可以像真实应用的 HOC 一样组合）以进行测试。

标签： reactjs react-router-dom

【解决方案1】：

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

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

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

【讨论】：

问题不在于路径不存在，因为您正确指出 to="/ajouter-ticket" 将匹配错误路径。 OP 说问题是Homepage 上的Link 没有在Router 中呈现。
完全不同。它是主页中的链接，而不是路由器。然后当我在测试主页中渲染时，他不理解上下文。然后我需要将路由器放入测试中以正确运行。谢谢回复