Реактивная маршрутизация: URL меняется, но страница не загружается

Question

В React (v16.13.1), URL-адрес изменяется, но страница не загружается .

Я нашел похожие вопросы ReactJS - React Router не изменяет компонент, но URL-адрес меняется и React Router, но не URL-адрес компонента , и я попытался из по-разному, но ни один не помогает мне.

Это может быть небольшая ошибка, пожалуйста, помогите исправить это.

Мой код выглядит следующим образом:

Приложение. js file

import React, { Component } from "react";
import { BrowserRouter as Router, Route,Switch,Redirect } from "react-router-dom";
import TopNav from "./components/Navbar/TopNav";
import SideNav from "./components/Navbar/SideNav";
import Dashboard from "./components/Dashboard";
import Analytics from "./components/Analytics";
import ToDo from "./components/ToDo";

class App extends React.Component {
  render() {
    return (
      <div>
        <TopNav />
        <SideNav />
        <Router>
          <Switch>
            <Route exact path="/">
              <Dashboard />
            </Route>
            <Route exact path="/analytics">
              <Analytics />
            </Route>
            {/* <Route exact path="/analytics" component={Analytics}></Route> */}
            <Route exact path="/todo">
              <ToDo />
            </Route>
            <Redirect to="/"></Redirect>
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;

SideNav. js страница выглядит следующим образом:

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";

class SideNav extends React.Component {
  render() {
    return (
      <div className="sidebar-wrapper">
        <div className="sidebar-container">
          <Router>
            <ul className="sidebar-menu">
              <li className="active">
                <i className="fa fa-cubes"></i>
                <Link className="link" to="/">
                  Dashboard
                </Link>
              </li>
              <li>
                <i className="fa fa-pie-chart"></i>
                <Link className="link" to="/analytics">
                  Analytics
                </Link>
              </li>
              <li>
                <i className="fa fa-medkit"></i>
                <Link className="link" to="/todo">
                  What to do?
                </Link>
              </li>
            </ul>
          </Router>
        </div>
      </div>
    );
  }
}
export default SideNav;

Заранее спасибо!

Answer 1

Ваш <SideNav /> и основной контент находятся в отдельных <Router /> с. Они не видят друг друга и не могут работать вместе.
Подумайте, как два iframe, перемещающихся независимо друг от друга, просто без фактических iframes.

Все, что требует маршрутизатор, в основном все ваше приложение , должно быть внутри одного <Router />.

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import TopNav from "./components/Navbar/TopNav";
import SideNav from "./components/Navbar/SideNav";
import Dashboard from "./components/Dashboard";
import Analytics from "./components/Analytics";
import ToDo from "./components/ToDo";

class App extends React.Component {
  render() {
    return (
      <Router>
        <TopNav />
        <SideNav />
        <Switch>
          <Route exact path="/">
            <Dashboard />
          </Route>
          <Route exact path="/analytics">
            <Analytics />
          </Route>
          {/* <Route exact path="/analytics" component={Analytics}></Route> */}
          <Route exact path="/todo">
            <ToDo />
          </Route>
          <Redirect to="/"></Redirect>
        </Switch>
      </Router>
    );
  }
}
export default App;

SideNav. js

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";

class SideNav extends React.Component {
  render() {
    return (
      <div className="sidebar-wrapper">
        <div className="sidebar-container">
          <ul className="sidebar-menu">
            <li className="active">
              <i className="fa fa-cubes"></i>
              <Link className="link" to="/">
                Dashboard
              </Link>
            </li>
            <li>
              <i className="fa fa-pie-chart"></i>
              <Link className="link" to="/analytics">
                Analytics
              </Link>
            </li>
            <li>
              <i className="fa fa-medkit"></i>
              <Link className="link" to="/todo">
                What to do?
                </Link>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

То же самое относится к TopNav.js.

Answer 2

Вам нужен только один <Router> на верхнем уровне вашего приложения.

Вы уже используете <Router> в своем App компоненте.

Оберните компонент SideNav в Router и удалите Router, используемый в SideNav.

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
  Link
} from "react-router-dom";

class SideNav extends Component {
  render() {
    return (
      <div className="sidebar-wrapper">
        <div className="sidebar-container">
          {/* <Router> */}
          <ul className="sidebar-menu">
            <li className="active">
              <i className="fa fa-cubes" />
              <Link className="link" to="/">
                Dashboard
              </Link>
            </li>
            <li>
              <i className="fa fa-pie-chart" />
              <Link className="link" to="/analytics">
                Analytics
              </Link>
            </li>
            <li>
              <i className="fa fa-medkit" />
              <Link className="link" to="/todo">
                What to do?
              </Link>
            </li>
          </ul>
          {/* </Router> */}
        </div>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <SideNav />
          <Switch>
            <Route exact path="/">
              <div>/</div>
            </Route>
            <Route exact path="/analytics">
              <div>ana</div>
            </Route>
            <Route exact path="/todo">
              <div>todo</div>
            </Route>
            <Redirect to="/" />
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;