错误:不变失败:当我尝试使用本地主机测试我的应用程序时，不应该在<Router>之外使用<Router>。

Question

当我尝试在localhost上测试我的应用程序时，我遇到了一个错误:在路由器中的3000，我如何修复它？我是一个新手，在React & React路由器中，什么样的问题会导致这种情况。

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

Answer 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>
    );
}