错误：不变量失败：当我尝试使用 localhost 测试我的应用程序时，您不应该在 <Router> 之外使用 <Link>答案

【问题标题】：Error: Invariant failed: You should not use <Link> outside a <Router> when I try to test my app using localhost错误：不变量失败：当我尝试使用 localhost 测试我的应用程序时，您不应该在 <Router> 之外使用 <Link>
【发布时间】：2021-07-14 18:41:01
【问题描述】：

当我尝试在路由器中的 localhost:3000 上测试我的应用程序时遇到错误，我该如何解决？我也是 React 和 React Router 的新手，什么样的问题会导致这种情况。

App.js：

import { NavBar } from "./shared/NavBar"
import { Switch, Route } from "react-router-dom";
import { BooksList } from "./BooksList";
import { CreateBook } from "./CreateBook";
import { UpdateBook } from "./UpdateBook";

function App() {
    return (
        <>
            <NavBar />
            <Switch>
                <Route path="/create-book">
                    <CreateBook />
                </Route>
                <Route path="/update-book">
                    <UpdateBook />
                </Route>
                <Route path="/">
                    <BooksList />
                </Route>
            </Switch>
        </>
    );
}

export default App;

NavBar 组件：

import { Flex, Image, Box, Link as StyledLink } from "rebass/styled-components";
import { Link } from "react-router-dom";

export const NavBar = () => {
    return (
        <Flex bg="black" color="white" justifyContent="center">
                <Flex px={2} width="100%" alignItems="center">
                    <Link component={StyledLink} variant="nav" to="/">
                        React CRUD App
                    </Link>
                    <Box mx="auto" />
                        <Link component={StyledLink} variant="nav" to="/create-book">
                            Add new item
                        </Link>
                </Flex>
        </Flex>
    )
}

【问题讨论】：

您是否在其他组件中使用了 <Link> 的外部 <Router>？
App 是否包含在 Router 组件中？您能否包含所有相关的组件代码，特别是在您渲染任何Link 和/或Router 组件的位置？
@DrewReese 是的，已添加
还有什么路由上下文，即Router？您是否将您的应用程序渲染为 router 组件？
您需要为Link、Route 和Redirect 组件提供路由上下文，方法是将它们渲染到ReactTree 中，并在它们上方添加Router。即使是为了测试。

标签： reactjs react-router react-router-dom

【解决方案1】：

将您的路由封装到 BrowserRouter

导入

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

包装路线

function App() {
    return (
        <Router>
           <div>
            <NavBar />
            <Switch>
                <Route path="/create-book">
                    <CreateBook />
                </Route>
                <Route path="/update-book">
                    <UpdateBook />
                </Route>
                <Route path="/">
                    <BooksList />
                </Route>
            </Switch>
           </div>
        </Router>
    );
}

【讨论】：

NavBar 听起来像是一个包含链接的组件。当然，这应该包含在路由上下文中，不是吗？
@DrewReese 错过了，应该在里面，谢谢！