大家好,我是 reactjs 的新手,我正在尝试学习 reactjs 路由器。我的仪表板路线发生了这种奇怪的事情。我的 App 组件有两个路由“/login”和“/”
'/login' 显示登录屏幕,'/' 显示主仪表板屏幕。在仪表板中,我有侧导航组件和主要内容组件。我正在尝试在主要组件中嵌套一组路由。当我通过侧面导航组件中的链接导航时,路线工作正常。但是当我尝试在浏览器中单击后退或前进按钮时,它不起作用。我得到一个没有加载任何内容的空白屏幕。
请需要你们的帮助。任何帮助将不胜感激。
请在下面找到代码。
//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;
提前感谢您的帮助...