Question

我正在尝试将路由器实现为我的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;

如果我从App.js中删除React Router DOM，我的页面就可以正常工作。我做错了什么？

Answer 1

如注释中所述，在app.js中，您正在将App类分配给App类中包含的路由。

在React Router DOM之后，ReactJS App会继续重新加载

1 个答案: