React js this.props.match.params empty when using protected routes - reactjs

Question

I have a reacj js app using react-routerv5.
Unfortunately am unable to get the this.props.match.params it is empty:
Object { path: "/", url: "/", params: {}, isExact: false }
My App.js is as follows
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;
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;
And my 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);
In my APP.js instead of using the Proute i use the <Route ..... component am ABLE to get the params. But not if i use the PRoute. I need the Proute since i want to enforce protected rule, but with this am not getting the params.

Answer 1

you should pass the props to the component
EDIT: passed all remaining props instead of just match
in 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>
);
}

Answer 2

qchmqs's answer should work this way
render() {
const { component: Component, exact, path, ...rest } = this.props;
const { isAuthenticated, loading } = this.state;
if (loading) {
return <div>Loading</div>;
}
if (!isAuthenticated) {
return <Redirect to={routeNames.LOGIN} />;
}
return (
<Route exact={exact} path={path}>
<Component ...rest />
</Route>
);
}