响应路由器Dom v6，路由继续添加

Question

当我设置并通过路由进行更改时，路由就会继续添加Infront。

示例：-如果我在http://localhost:3001/login页面上，并单击“注册链接”，则在前面添加register路由，如==> http://localhost:3001/login/register

有人能告诉我我做错了什么吗？

码

App.js

import "./App.scss";
import { Routes, Switch, Route } from "react-router-dom";

import Home from "./components/Home/Home";
import Login from "./components/Login/Login";
import Register from "./components/Register/Register";

function App() {
    return (
        <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
        </Routes>
    );
}

export default App;

Home.js

import React from "react";
import { Link, Router } from "react-router-dom";

function Home() {
    return (
        <div>
            Home
            <ul>
                <li>
                    <Link to="login">Login</Link>
                </li>
                <li>
                    <Link to="register">Register</Link>
                </li>
            </ul>
        </div>
    );
}

export default Home;

Register.js

import React from "react";
import { Link, Router } from "react-router-dom";

function Register() {
    return (
        <div>
            Register
            <ul>
                <li>
                    <Link to="login">Login</Link>
                </li>
            </ul>
        </div>
    );
}

export default Register;

Login.js

import React from "react";
import { Link, Router } from "react-router-dom";

function Login() {
    return (
        <div>
            Login
            <ul>
                <li>
                    <Link to="register">Register</Link>
                </li>
            </ul>
        </div>
    );
}

export default Login;

Answer 1

我认为，在乞讨时更改链接to参数以包含/ (斜杠)应该可以解决您的问题。Final elem应该如下所示：<Link to="/register">Register</Link>

Answer 2

问题

react-router-dom@6使用绝对路径和相对路径路由/导航。绝对路由/导航与相对路由/导航之间的区别是路径/目标中的一个领先的"/"字符。

例如，Login组件在path="/login"上呈现，并呈现到"register"的链接<Link to="register">Register</Link>。这意味着Login将链接到"register" path 相对到当前"/login"路径，从而导航到"/login/register"。

在path="/register"上呈现path="/register"和呈现<Link to="login">Login</Link>时也会出现同样的问题。

解决方案

使用绝对路径：

示例：

function Register() {
  return (
    <div>
      Register
      <ul>
        <li>
          <Link to="/login">Login</Link>
        </li>
      </ul>
    </div>
  );
}

..。

function Login() {
  return (
    <div>
      Login
      <ul>
        <li>
          <Link to="/register">Register</Link>
        </li>
      </ul>
    </div>
  );
}

使用相对路径并导航到同级路由(即由同一个父Routes组件呈现的同级路由)。

示例：

function Register() {
  return (
    <div>
      Register
      <ul>
        <li>
          <Link to="../login">Login</Link>
        </li>
      </ul>
    </div>
  );
}

..。

function Login() {
  return (
    <div>
      Login
      <ul>
        <li>
          <Link to="../register">Register</Link>
        </li>
      </ul>
    </div>
  );
}