Reactjs 使用受保护的路由时，React js this.props.match.params为空

我有一个使用react-routerv5的Reach 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;

从“React”导入React；
//从“/logo.svg”导入徽标；
//导入“/App.css”；
进口{
家，
登录，
登记
没有发现，
仪表板
问题清单，
}来自“/组件”；
从“/routingParams”导入{routeNames}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/Proute”导入Proute；
函数App（）{
返回(
} />
} />
}
/>
}
/>
);
}
导出默认应用程序；

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

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

import React，{Component}来自“React”；
从“react router dom”导入{Redirect}；
从“/services”导入{AuthService}；
从“/routingParams”导入{routeNames}；
从“react router”导入{withRouter}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
类Proute扩展了组件{
状态={
I认证：错误，
加载：对，
};
componentDidMount（）{
var auth=new AuthService（）；
var_this=这个；
auth.isAuthenticated（）.then（函数（结果）{
_this.setState（{isAuthenticated:result，loading:false}）；
});
}
render（）{
const Component=this.props.Component；
const{isAuthenticated，load}=this.state；
如果（装载）{
回装；
}
如果（！已验证）{
返回；
}
返回(
);
//const isAuthenticated=true；
}
}
导出默认程序；

还有我的问题清单：

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

import React，{Component}来自“React”；
从“react router dom”导入{useParams}；
从“react router”导入{withRouter}；
类问题列表扩展组件{
//问题列表页
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
const id=this.props.match.params.id；
console.log（id）；
console.log（this.props.match）；
}
render（）{
document.title=“问题列表”；
返回问题；
}
}
使用路由器导出默认值（问题列表）；

---

在我的APP.js中，我使用的不是

Proute

，而是

，您应该将道具传递给组件

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

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

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

render（）{
const{component:component，…rest}=this.props；
const{isAuthenticated，load}=this.state；
如果（装载）{
回装；
}
如果（！已验证）{
返回；
}
返回(
);
}
将其余的道具传递给组件，但组件仍然显示为空<代码>对象{path:/”，url:/”，参数：{}，isExact:false}

我是通过使用

问题列表.computedMatch.params中的
而不是
这个.props.match
来获取它的。谢谢：）