React Router Dom v6, Routes keep adding

Question

When I set up React Router Dom and changed through routes, Routes keep adding Infront.

Example:- If I'm on the http://localhost:3001/login page and I click to Register Link register route is added in front like this ==> http://localhost:3001/login/register

Can anyone show me what have I done wrong?

Codes

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

Issue

react-router-dom@6 uses both absolute and relative path routing/navigation. The difference between absolute and relative routing/navigation is a leading "/" character in paths/targets.

For example, the Login component is rendered on path="/login" and renders a link <Link to="register">Register</Link> to "register". This means that Login will link to a "register" path relative to the current "/login" path, resulting in navigating to "/login/register".

The same issue occurs when rendering Register on path="/register" and rendering <Link to="login">Login</Link>.

Solution

Use absolute paths:

Example:

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

Use relative paths and navigate to a sibling route (i.e. a sibling route rendered by the same parent Routes component).

Example:

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

Answer 2

I believe, that changing the Link to parameter to contain / (slash) at the beggining, should solve your problem. Final elem should look like this: <Link to="/register">Register</Link>