React Router params returning empty object

Question

In my App.js file where I render all my routes I have this code:

import LiveMatch from "../containers/LiveMatch";

const routes = [
  //removed other routes for simplicity of post
  {
    path: "/livematch/:matchid", <--- here is the param I want
    exact: true,
    component: () => <LiveMatch />
  }
];

class App extends Component {

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            {routes.map((route, index) =>
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.component}
              />
            )}
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

Now that I have the component set up, I try to print out the :matchid parameter but I keep getting an empty object.

class LiveMatch extends Component {
  constructor(props) {
    super(props)
    this.state = {...}

    console.log(this.props) // returns { }
  }

  componentDidMount() {
     console.log(this.props) // returns { }
  }

}

Whether I try to access props in constructor or after mounting the props is always empty. From other posts I've searched up apparently the answer should be as simple as this.props.params.matchid or this.props.match.params.matchid.

Question: How do I get access to the :matchid param. Am I doing anything incorrectly?

Mayank Shukla · Accepted Answer · 2017-09-01 08:47:17Z

2

Why it is not available inside LiveMatch component?

Because you are not passing the default props (means props passed by router into component) into LiveMatch component. You are overriding the props values.

Solution is, With arrow function receive the props and pass down into component it will work.

Write it like this:

component: (props) => <LiveMatch {...props}/>

Or remove the arrow function:

component: LiveMatch

edited Sep 1, 2017 at 8:47

answered Sep 1, 2017 at 8:43

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Router params returning empty object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related