CODEWITHSUNDEEP
reactjsreact-router
Kheshav Sewnundun
Kheshav Sewnundun

Reputation: 1244

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

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.

Upvotes: 0

Views: 895

Answers (2)

Ashot Arzumanyan
Ashot Arzumanyan

Reputation: 151

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

Upvotes: 0

Qchmqs
Qchmqs

Reputation: 1805

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

Upvotes: 1

Related Questions