React 路由不起作用 | 反应路由器

Question

我安装 npm install react-router-dom@6 并设置路由路径..

import React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./App.css";
import HeaderBar from "./components/HeaderBar/HeaderBar";
import SignIn from "./components/SignIn/SignIn";
import SignUp from "./components/SignUp/SignUp";

function App() {
  return (
    <div>
      <BrowserRouter>
        <HeaderBar />
        <Route path="/">
          <SignIn />
        </Route>
        <Route path="/signup">
          <SignUp />
        </Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

预览不起作用。没有看到任何错误。为什么是..？请帮我。

Answer 1

您需要使用Routes而不是Switch用于react-router-dom@6。像这样的东西：

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
      </Route>
    </Routes>
  </BrowserRouter>