Я просто пытаюсь щелкнуть компонент и отреагировать на повторную визуализацию того, что необходимо для визуализации. Но я просто не могу это заархивировать. Это то, что у меня есть до сих пор:

Index.js (здесь я пытался хранить все свои маршруты)

import React from "react";
import ReactDOM from "react-dom";
import Main from "./pages/index/main.js";
import Login from "./pages/signin/signin.js";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
ReactDOM.render(
  <div>
    <Router>
      <Switch>
        <Route exact  path="/" render={()=> <Main />}/>
        <Route path="/login" render={()=> <Login />}/>
      </Switch>
    </Router>
  </div>,
  document.getElementById("root")
);

Header.JS (где у меня настроены теги ссылок)

import React from "react";
import style from "./../acc/css/navbar.css";
import { BrowserRouter as Router, Link} from "react-router-dom";
export default class Header extends React.Component {
    render() {
        return (
            <Router>
    <section className={style.nav} id="nav">
            <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/login">Login</Link></li>
            </ul>
        </section>
        </Router>
        );
    }
}

На данный момент, когда я вручную перехожу к /, он отображает компонент Main, а когда я вручную перехожу к /login, он отображает компонент Login.

Однако, когда я нажимаю на компонент <Link>, он не отображается, он просто меняет URL-адрес на /login или наоборот.

Мне было интересно, есть ли какое-либо решение этой проблемы?

Изменить 1

Код main.js

import React from "react";
//import compunts
import Header from "./../header.js";
import Qoute from "./qoute.js";
import Grades from "./grades.js";

export default class Main extends React.Component {
    render() {
        return (
      <div id="continor">
                <Header />
                <Qoute />
                <Grades />
            </div>
        );
    }
}

Вход.js

    import React from "react";
    import Header from "./../header.js";
    import Qoute from "./qoute.js";
    import Form from "./form.js";
    export default class Login extends React.Component {
        render() {
            return(
          <div>
          <Header />
            <section id="info">
              <div className="containor">
                <div className="row">
                  <Qoute />
                  <Form />
                </div>
              </div>
            </section>
          </div>
            );
        }
    }

Для уточнения я попробовал

<Route exact path="/" component={Main}/>

и это все еще не работает. Любые решения?