错误：不变失败：你不应该使用<Link>外面<Router>当我尝试使用 localhost 测试我的应用程序时

Question

I'm getting an error when I try to test my app on localhost:3000 in the Router, how can I fix it? I'm newbie in React & React Router also, what kind of problems can cause this.

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 component:

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

Wrap your routing to BrowserRouter

import

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

and wrap routes

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