Маршруты не реагируют с помощью кнопки браузера «Назад» и «Вперед» при использовании вложенных маршрутов в реакции. - PullRequest
Новая
       21

Маршруты не реагируют с помощью кнопки браузера «Назад» и «Вперед» при использовании вложенных маршрутов в реакции.

0 голосов
/ 24 апреля 2019

Привет, ребята. Я новичок в рэйджей, я пытаюсь изучить роутер рэйджей. У меня странная вещь, происходящая с моими маршрутами в Dashboard. Мой компонент приложения имеет два маршрута "/ login" и "/"

«/ login» отображает экран входа в систему, а «/» - главный экран панели инструментов. На панели инструментов у меня есть компонент sidenavigation и компонент «Основной контент». Я пытаюсь вложить набор маршрутов в основной компонент. Маршруты работают нормально, когда я перемещаюсь по ссылкам в компоненте боковой навигации. Но когда я пытаюсь нажать кнопку назад или вперед в браузере, это не работает. Я получаю пустой экран без загрузки.

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

Пожалуйста, найдите код ниже. 

//App.js

import React, { Component } from "react";

import { BrowserRouter, Route, Switch } from "react-router-dom";
import MainPage from "./Mainpage";
import LoginPage from "./components/pages/LoginPage";
import "./styleFiles/index.css";

class App extends Component {
  render() {
    return (
      <div className="flexible-content">
        <Route path="/" exact component={MainPage} />
        <Route path="/login" component={LoginPage} />
      </div>
    );
  }
}

export default App;


//MainPage.js

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

import SideNavigation from "./components/sideNavigation";
import Footer from "./components/Footer";
import "./styleFiles/index.css";
import DashboardPage from "./components/pages/DashboardPage";
import ProfilePage from "./components/pages/ProfilePage";
import TablesPage from "./components/pages/TablesPage";

import InventoryPage from "./components/pages/InventoryPage";

class MainPage extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="flexible-content">
          <SideNavigation />
          <main id="content" className="p-5">
            <Switch>
              <Route path={"/"} exact component={DashboardPage} />
              <Route path={"/Dashboard"} exact component={DashboardPage} />
              <Route path="/profile" component={ProfilePage} />
              <Route path="/tables" component={TablesPage} />
              <Route path="/inventory" component={InventoryPage} />
              <Route component={DashboardPage} />
            </Switch>
          </main>
          <Footer />
        </div>
      </BrowserRouter>
    );
  }
}

export default MainPage;



//sideNavigation.js

import React from "react";
import logo from "../assets/logo_.svg";
import { MDBListGroup, MDBListGroupItem, MDBIcon } from "mdbreact";
import { NavLink } from "react-router-dom";
import "../styleFiles/sideBar.css";

const sideNavigation = () => {
  return (
    <div className="sidebar-fixed position-fixed">
      <a href="#!" className="logo-wrapper waves-effect">
        <img alt="MDB React Logo" className="img-fluid" src={logo} />
      </a>
      <MDBListGroup className="list-group-flush">
        <NavLink exact={true} to="/" activeClassName="activeClass">
          <MDBListGroupItem className="bgc">
            <MDBIcon icon="chart-pie" className="mr-3" />
            Testing Dashboard
          </MDBListGroupItem>
        </NavLink>
        <NavLink to="/profile" activeClassName="activeClass">
          <MDBListGroupItem className="bgc">
            <MDBIcon icon="user" className="mr-3" />
            Projects
          </MDBListGroupItem>
        </NavLink>
        <NavLink to="/tables" activeClassName="activeClass">
          <MDBListGroupItem className="bgc">
            <MDBIcon icon="table" className="mr-3" />
            Tables
          </MDBListGroupItem>
        </NavLink>
        <NavLink to="/inventory" activeClassName="activeClass">
          <MDBListGroupItem className="bgc">
            <MDBIcon icon="fas fa-truck-loading" className="mr-3" />
            Inventory
          </MDBListGroupItem>
        </NavLink>
        <NavLink to="/404" activeClassName="activeClass" />
      </MDBListGroup>
    </div>
  );
};

export default sideNavigation;

заранее спасибо за вашу помощь, ребята ...

1 Ответ

0 голосов
/ 24 апреля 2019

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

import React, { Component } from "react";

import { BrowserRouter, Route, Switch } from "react-router-dom";
import MainPage from "./Mainpage";
import LoginPage from "./components/pages/LoginPage";
import "./styleFiles/index.css";

class App extends Component {
  render() {
    return (
      <div className="flexible-content ">
        <Switch>
          <Route path="/Main" exact component={MainPage} />
          <Route path="/login" component={LoginPage} />
          <Route component={MainPage} />
        </Switch>
      </div>
    );
  }
}

export default App;

Я добавил метку-переключатель и компонент общего маршрута не найден в мой файл app.js.

...