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

Question

我有一个像这样的超级简单的反应应用程序。

• 索引.tsx

• 应用程序.tsx

• 主要.tsx

• 主页.tsx

索引.tsx

import 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')

);

应用程序.tsx

import React from 'react';

import Main from "./Main";

function App() {

  return (

    <Main />

  );

}

export default App;

主要.tsx

import 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;

主页.tsx

import 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>然后最后你可以保留你原来的测试用例。