مشكلة توجيه في react-router

لماذا عندما أنتقل مثلا الى /book/12 ثم أحاول العودة الى /login يختلط الرابط ليصبح بدل أن ينتقل الى

http://localhost:3000/login

ينتقل الى

http://localhost:3000/book/login

وهذه هي المكونات التي أستخدمها

//index.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

.....

export default function index() {
  return (
    <Router>
      <Switch>
        <Route title="index" exact path="/">
          <Index />
        </Route>
        <Route title="books" exact path="/books">
          <Books />
        </Route>
        <Route title="book" exact path="/book/:id">
          <Book />
        </Route>
        <Route title="register" exact path="/register">
          <Register />
        </Route>
        <Route title="login" exact path="/login">
          <Login></Login>
        </Route>
      </Switch>
    </Router>
  );
}

//Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';

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

//Books.js

import React from 'react';
import { Link } from 'react-router-dom';

export default function Books({ data }) {
  return (
    <div>
      {data.map((book) => (
        <Link to={`/book/${book.id}`}> {book.title}</Link>
      ))}
    </div>
  );
}