Блог

я пытаюсь внедрить маршрутизатор в свое приложение reactjs, и после настройки моя страница даже не загружается, она просто продолжает перезагружаться в моем браузере до сбоя.

Это мой app.js

 import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
class App extends Component {


  render() {
    return (
      <div className="App">
        <Header />
        <Content
          job={this.state.header_infos[0].job}
          college={this.state.header_infos[0].college}
        />
        <Skills />
        <Portfolio />
        <Timeline />
        <Footer />
        <BrowserRouter>
          <Route exact path="/" component={App} /> /* if it clicks in my logo, redirect to mainpage */
          <Route path="/monitoria" component={Monitoria} /> /* if clicks in Monitoria from Navbar, redirects to Monitoria component. */
        </BrowserRouter>
      </div>
    );
  }
}
  

И это мой Header.js с моей навигационной панелью

 import React from "react";
import "../sass/Header.scss";
import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <header className="">
      <NavLink exact to="/">
        <h1 className="logo">Logo</h1>
      </NavLink>
      <input type="checkbox" id="nav-toggle" className="nav-toggle" />
      <nav>
        <ul>
          <li className="menu-item">
            <NavLink to="/monitoria">Monitoria</NavLink>
          </li>
          <a className="btn-rounded" href="#">
            <li className="menu-item">Fale comigo</li>
          </a>
        </ul>
      </nav>
      <label htmlFor="nav-toggle" className="nav-toggle-label">
        <span />
      </label>
    </header>
  );
};

export default Header;
  

Если я удалю React Router DOM из своего App.js моя страница работает просто отлично. Что я делаю не так?

Как упоминалось в комментарии, в app.js вы назначаете класс App маршруту, который содержится в классе App.