反应路线不工作 |反应路由器

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

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

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

Answer 2

我唯一能看到“不工作”的是两条路线将匹配并使用路径 "/signup" 呈现。路由器组件包括渲染所有匹配的 Route 和 Redirect 组件。

您可能希望将路由包装在 Switch 组件中，以便路由 排他性地 匹配和呈现。

Switch

Renders the first child <Route> or <Redirect> that matches the location.

还要记住，在 Switch 组件中，路径顺序和特异性很重要。您需要将路径从 more 特定路径排序为 less 特定路径。 "/" 几乎是通用的，因此应该在 之后呈现 更具体的 "/signup" 路径。

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

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

如果问题是您安装了 react-router-dom 版本 6 并且您使用的是过时的教程，请将 Switch 组件替换为 所需的 Routes 组件并在 Route 组件的 element 属性 上渲染路由组件为 JSX。

import { BrowserRouter, Routes, Route } from "react-router-dom";

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

Answer 3

我不知道为什么你没有收到错误，但我已经添加了你可以尝试的工作代码

import React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Routes } 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 />
        <Routes>
          <Route path="/" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

您可以在 Routes 中使用 Route 并在元素中传递您的组件

Answer 4

React 路由器的新版本 6 有一些重大变化。因此，如果您希望您的代码正常工作，请执行以下操作。您必须将所有路线包装在如下所示的路线标签中。

<BrowserRouter>
     <Routes>
         <Route path='/signin' element={<SignIn />} />
         <Route path='/signup' element={<SignUp />}  />
     </Routes>
</BrowserRouter>

还有一件事，除了 Route 标签之外，它们不应该是 Routes 标签中的任何东西。

反应路线不工作 |反应路由器

React route is not working | React Router

reactjs

react-router

react-router-dom