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

Question

I want to use history explicitly. So I know about BrowserRoute but I want to use Route and use history as its property. when I run the program I get this page. enter image description here

This is my 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, component: Component, ...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);

I searched a lot about this problem but I do not get the right answer. Please help if you can.

Answer 1

I changed my "history" version to "4.7.2". It works properly.