“ react-router-dom”路由器组件不起作用

问题描述

我想明确使用历史记录。因此，我了解browserRoute，但我想使用Route并将历史记录用作其属性。当我运行程序时，会显示此页面。enter image description here

这是我的AppRouter.js

import React from "react";
import { Router,Route,Switch } from "react-router-dom";
import { createbrowserHistory } from "history";
import LoginPage from "../components/LoginPage";
import ExpenseDashboardPage from "../components/ExpenseDashboardPage";
import AddExpensePage from "../components/AddExpensePage";
import EditExpensePage from "../components/EditExpensePage";
import NotFoundPage from "../components/NotFoundPage";
import PublicRoute from "./PublicRoute";
import PrivateRoute from "./PrivateRoute";

export const history = createbrowserHistory();

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <PublicRoute path="/" component={LoginPage} exact={true} />
        <PrivateRoute path="/dashboard" component={ExpenseDashboardPage} />
        <PrivateRoute path="/create" component={AddExpensePage} />
        <PrivateRoute path="/edit/:id" component={EditExpensePage} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

LoginPage.js

import React from "react";
import { connect } from "react-redux";
import { startLogin } from "../actions/auth";

export const LoginPage = ({ startLogin }) => (
  <div>
    <button onClick={startLogin}>Login with Google</button>
    <button>Amir Hossein Jobeiri</button>
  </div>
);

const mapdispatchToProps = (dispatch) => ({
  startLogin: () => dispatch(startLogin()),});

export default connect(undefined,mapdispatchToProps)(LoginPage);

PublicRoute.js

import React from "react";
import { connect } from "react-redux";
import { Route,Redirect } from "react-router-dom";

export const PublicRoute = ({
  isAuthenticated,component: Component,...rest
}) => (
  <Route
    {...rest}
    component={(props) =>
      isAuthenticated ? <Redirect to="/dashboard" /> : <Component {...props} />
    }
  />
);

const mapStatetoProps = (state) => ({
  isAuthenticated: !!state.auth.uid,});

export default connect(mapStatetoProps)(PublicRoute);

PrivateRoute

import React from "react";
import { connect } from "react-redux";
import { Route,Redirect } from "react-router-dom";
import Header from "../components/Header";

export const PrivateRoute = ({
  isAuthenticated,...rest
}) => (
  <Route
    {...rest}
    component={(props) =>
      isAuthenticated ? (
        <div>
          <Header />
          <Component {...props} />
        </div>
      ) : (
        <Redirect to="/" />
      )
    }
  />
);

const mapStatetoProps = (state) => ({
  isAuthenticated: !!state.auth.uid,});

export default connect(mapStatetoProps)(PrivateRoute);

我搜索了很多有关此问题的信息，但没有得到正确的答案。如果可以的话，请帮忙。

解决方法

我将“历史记录”版本更改为“ 4.7.2”。它正常工作。