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

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>

Answer 2

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

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;

您可以在路由中使用路由，并在元素内传递组件

Answer 3

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

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

还有一件事，除了路由标签之外，它们不应该是路由标记中的任何内容。

Answer 4

我唯一能看到的"不起作用"的是两条路由都将匹配并与路径"/signup"一起渲染。路由器组件包含呈现所有匹配的Route和Redirect组件。

您可能希望将路由包装在Switch组件中，以便以独占方式匹配和呈现路由。

开关

呈现<Redirect><Route>与 位置。

还要记住，在Switch组件中，路径顺序和特异性很重要。您需要对路径从更具体的路径到不太具体的路径进行排序。"/"与它得到的一样通用，因此应该在更具体的"/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>
);
}

如果问题是您已经安装了版本 6react-router-dom并且您正在使用过时的教程，请替换所需Routes组件的Switch组件，并将Route组件的elementprop 上的路由组件渲染为 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>
);
}