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;

还有我的QuestionList：

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 .....来获取参数。但如果我使用PRoute，则不会。因为我要执行受保护的规则，所以我需要Proute，但是这样做并没有得到params。

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

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

1 个答案: