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

Posted 2023-02-22

【中文标题】“react-router-dom”路由器组件不起作用

【英文标题】："react-router-dom " router component does not work

【发布时间】：2021-02-07 03:05:06

【问题描述】：

我想明确地使用历史。所以我知道 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);

私人路线

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);

我对这个问题进行了很多搜索，但没有得到正确的答案。如果可以的话，请帮忙。

【问题讨论】：

历史包的版本是多少？

如果在codesandbox 中添加代码更适合调试。谢谢。

也许这个链接会帮助你gist.github.com/rcanepa/b4ce0dff8d85b357504e04b03e69ac66

【参考方案1】：

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