javascript - 不变量失败:您不应该使用外面
问题描述
我为基本导航添加了反应路由器并且工作正常,但是当我运行测试时它返回错误。
Error: Uncaught [Error: Invariant failed: You should not use Switch outside a Router]
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { BrowserRouter } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();
应用程序.js
import React from "react";
import { Normalize } from "styled-normalize";
import { Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import FooterBarNavigator from "./navigators/FooterBarNavigator";
import Favorites from "./pages/Favorites";
import Finder from "./pages/Finder";
import Notifications from "./pages/Notifications";
import Profile from "./pages/Profile";
function App() {
return (
<div className="App">
<Normalize />
<FooterBarNavigator />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/favorites" component={Favorites} />
<Route exact path="/finder" component={Finder} />
<Route exact path="/notifications" component={Notifications} />
<Route exact path="/profile" component={Profile} />
</Switch>
</div>
);
}
export default App;
页脚栏导航器.js
import React from "react";
import styled from "styled-components";
import homeIcon from "../../assets/icons/home.svg";
import favoritesIcon from "../../assets/icons/favorite.svg";
import serachIcon from "../../assets/icons/search.svg";
import notificationsIcon from "../../assets/icons/notifications.svg";
import profileIcon from "../../assets/icons/profile.svg";
import { Link } from "react-router-dom";
const FooterBarNavigator = () => {
return (
<StyledFooterBarNavigator>
<Link to="/">
<StyledSectionIcon src={homeIcon} alt="" />
</Link>
<Link to="/favorites">
<StyledSectionIcon src={favoritesIcon} alt="" />
</Link>
<Link to="/finder">
<StyledSectionIcon src={serachIcon} alt="" />
</Link>
<Link to="/notifications">
<StyledSectionIcon src={notificationsIcon} alt="" />
</Link>
<Link to="/profile">
<StyledSectionIcon src={profileIcon} alt="" />
</Link>
</StyledFooterBarNavigator>
);
};
const StyledFooterBarNavigator = styled.div`
display: grid;
position: fixed;
width: 100%;
bottom: 0;
grid-gap: 1rem;
grid-template-columns: repeat(5, auto);
grid-template-rows: auto;
align-items: center;
`;
const StyledSectionIcon = styled.img`
height: 35px;
padding: 10px;
margin: auto auto 5px auto;
display: block;
`;
export default FooterBarNavigator;
app.test.js
import React from 'react';
import { render } from '@testing-library/react';
import App from '../../components/App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/home/i);
expect(linkElement).toBeInTheDocument();
});
包.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lazyload": "^2.6.8",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1",
"styled-normalize": "^8.0.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
解决方案
在您的 index.js 中,您通过包含<App />
带有 的组件来正确包装您的路线<BrowserRouter />
,但您在测试中没有这样做,所以只需更改:
const { getByText } = render(<App />);
至:
const { getByText } = render(
<BrowserRouter>
<App />
</BrowserRouter>
);
完整的新测试文件:
import React from 'react';
import { render } from '@testing-library/react';
import { BrowserRouter } from "react-router-dom";
import App from '../../components/App';
test('renders learn react link', () => {
const { getByText } = render(
<BrowserRouter>
<App />
</BrowserRouter>
);
const linkElement = getByText(/home/i);
expect(linkElement).toBeInTheDocument();
});
推荐阅读
- python - 如何使用 Python 比较来自同一个 dict 键的嵌套字典值
- r - 在 R 中的另一个图中单击更改一个图的限制
- python - Youtube Data API 不断请求授权
- javascript - 将 RXJS 可观察结果合二为一
- python - 获取熊猫系列中的前 K 值包括重复值
- wordpress - Gutenberg 元信息在 post_content 字段中保存为 HTML 注释
- algorithm - 矩阵中给定区域的中位数
- html - 不需要时显示模型的哈希
- javascript - HTML5 视频持续时间无限,而 readyState = 4
- python - 避免在函数中重复加载文件