React 笑话 - 你不应该在 <Router> 之外使用 <Link>

Question

我有一个像这样的超级简单的反应应用程序。索引.tsx应用程序.tsx主要.tsx主页.tsx索引.tsximport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import { BrowserRouter as Router } from "react-router-dom";import { ApolloProvider } from "react-apollo";import client from "./utils/client";ReactDOM.render(  <Router>    <ApolloProvider client={client}>      <App />    </ApolloProvider>  </Router>,  document.getElementById('root'));应用程序.tsximport React from 'react';import Main from "./Main";function App() {  return (    <Main />  );}export default App;主要.tsximport React from 'react';import { Switch, Route, Link } from "react-router-dom";import Home from "./Home";const Main:React.FC = () => {    return (        <div>            <Switch>                <Route exact path='/' component={Home} />            </Switch>        </div>    );};export default Main;主页.tsximport React, {useContext} from 'react';import { Link } from "react-router-dom";const Home:React.FC = () => {    return (        <div>            <h1>Home</h1>            <Link to='http://google.com'> Google</Link>        </div>    );};export default Home;    我有一个带有虚拟测试的 App.test.tsx 来运行它。import React from 'react';import { render, screen } from '@testing-library/react';import App from './App';test('renders learn react link', () => {  render(<App />);  expect(true).toBeTruthy});如果我用yarn test我得到一个错误：不变失败：你不应该<Link>在 a 之外使用<Router>我拥有的链接被Home.tsc包围<Router>在index.tsx我在这里做点事。该应用程序运行没有任何错误。此错误仅在我运行测试时出现

Answer 1

下面有两种解决方案，第一种是将<Router>组件添加到您的测试用例中。第二个选项是从 切换<Link>到一个简单的锚标记。

选项1：

您<Router>也可以将组件添加到您的测试中，这样它就不会丢失：

test('renders learn react link', () => {

  render(<Router>

    <App />

  </Router>);

  expect(true).toBeTruthy

});

选项 2：

您也可以从组件更改<Link>为简单的锚标记，因为它会根据您的代码创建相同的最终结果：

<Link to='http://google.com'> Google</Link>

组件中的以下内容<Home>：

<a href="http://google.com">Google</a>

然后最后你可以保留你原来的测试用例。