Question

当我尝试在路由器的 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;

导航栏组件：

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

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

1 个答案: