reactjs - 使用受保护的路由时反应 js this.props.match.params 为空

Question

我有一个使用 react-routerv5 的 reacj js 应用程序。不幸的是，我无法得到this.props.match.params它是空的：

Object { path: "/", url: "/", params: {}, isExact: false }

我的 App.js 如下

import React from "react";
//import logo from './logo.svg';
//import './App.css';
import {
  Home,
  Login,
  Register,
  NOTFOUND,
  Dashboard,
  QuestionList,
} from "./components";
import { routeNames } from "./routingParams";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Proute from "./Proute";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path={routeNames.HOME} exact component={() => <Home />} />
          <Route path={routeNames.LOGIN} exact component={() => <Login />} />
          <Route
            path={routeNames.SIGNUP}
            exact
            component={() => <Register />}
          />
          <Proute
            path={routeNames.DASHBOARD}
            exact
            component={() => <Dashboard />}
          />
          <Proute path={"/questions/:test"} component={QuestionList} />
          <Route component={NOTFOUND} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

我的 Proute.js：

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import { AuthService } from "./services";
import { routeNames } from "./routingParams";
import { withRouter } from "react-router";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

class Proute extends Component {
  state = {
    isAuthenticated: false,
    loading: true,
  };

  componentDidMount() {
    var auth = new AuthService();
    var _this = this;
    auth.isAuthenticated().then(function (result) {
      _this.setState({ isAuthenticated: result, loading: false });
    });
  }

  render() {
    const Component = this.props.component;

    const { isAuthenticated, loading } = this.state;

    if (loading) {
      return <div>Loading</div>;
    }
    if (!isAuthenticated) {
      return <Redirect to={routeNames.LOGIN} />;
    }
    return (
      <Route>
        <Component />
      </Route>
    );
    //const isAuthenticated = true;
  }
}

export default Proute;

还有我的问题清单：

import React, { Component } from "react";
import { useParams } from "react-router-dom";
import { withRouter } from "react-router";

class QuestionList extends Component {
  // Question List page

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const id = this.props.match.params.id;
    console.log(id);
    console.log(this.props.match);
  }

  render() {
    document.title = "Question Lists";
    return <div>Question</div>;
  }
}
export default withRouter(QuestionList);

在我的 APP.js 中而不是使用Proute我使用<Route .....组件 am ABLE 来获取参数。但如果我使用 PRoute 则不会。我需要 Proute，因为我想执行受保护的规则，但是这样我没有得到params.

标签： reactjsreact-router

Answer 1

您应该将道具传递给组件

编辑：通过所有剩余的道具，而不是仅仅匹配

在 Proute.js 中：

  render() {
    const { component: Component, ...rest } = this.props;

    const { isAuthenticated, loading } = this.state;

    if (loading) {
      return <div>Loading</div>;
    }
    if (!isAuthenticated) {
      return <Redirect to={routeNames.LOGIN} />;
    }
    return (
      <Route>
        <Component ...rest />
      </Route>
    );
  }