TypeError: Cannot read property 'params' of undefined at App React Router

Question

Whenever I console log props.match.params, I get an error:

TypeError: Cannot read property 'params' of undefined at App. I'm not sure this is relevant, but even if I console.log(props) I get four empty arrays. Here is all the relevant code:

Home.js

import React from "react";
import App from "./App";
import { render } from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

const Home = () => {
  return (
    <div>
      <Router>
        <Route exact path="/">
          <App />
        </Route>
        <Route path="/:roomCode" component={App} />
      </Router>
    </div>
  );
};

export default Home;

App.js (only the relevant part)

const App = (props) => {

  console.log(props.match.params);

};

export default App;
const appDiv = document.getElementById("app");
render(<App />, appDiv);

I have been trying to figure this out for the past two days. Nothing works. Also, history.push also doesn't work, returns a very similar error. I have a feeling react-router-dom is broken in my project. Help is much appreciated.

Edit: Here is the codesandbox: https://codesandbox.io/s/reverent-microservice-iosu2?file=/src/App.js

would you show us how you change the route to App? does that work right? — Yaya
– Yaya, Commented Jan 27, 2021 at 7:18
it does work right, I used an alternative window.location.pathname.split("/")[1] and everything was working fine, but then I decided to use props.match.params, so yeah, everything is working with the routing to App — MicasiO
– MicasiO, Commented Jan 27, 2021 at 7:20
There is difference between <Route exact path="/" component={App} /> and <Route exact path="/" ><App /></Route> — sourav satyam
– sourav satyam, Commented Jan 27, 2021 at 7:23
I am following tutorial youtube.com/… and in the video he did it the same as I am, and the props.match.params is working fine for him, so I assume I don't have to explicitly pass props to App — MicasiO
– MicasiO, Commented Jan 27, 2021 at 7:24

Taghi Khavari · Accepted Answer · 2021-01-27 08:21:30Z

2

Your Home Component is the root of all your components so it needs to be pass to render function not your App which is a descendent of Home.

after that change you need to change this line in your Home Component:

<Route exact path="/" render={(props) => <App {...props} />} />

import React from "react";
import App from "./App";
import { render } from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

const Home = () => {
  return (
    <div>
      <Router>
        <Route exact path="/" render={(props) => <App {...props} />} />
        <Route path="/:roomCode" component={App} />
      </Router>
    </div>
  );
};

export default Home;

here is how to render it:


const appDiv = document.getElementById("app");
render(<Home />, appDiv);

now you can get the props


const App = (props) => {
  console.log(props.match.params);
};

export default App;

edited Jan 27, 2021 at 8:21

answered Jan 27, 2021 at 7:34

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

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

5 Comments

MicasiO Over a year ago

did you mean to add two of the renders in <Home /> or is that a mistake?

MicasiO Over a year ago

either way, I still get the same error :/

Taghi Khavari Over a year ago

@MicasiO No, that was a typo. I mean you need to render Home Component and change the Route that is used for App, try it again with the above code

MicasiO Over a year ago

I noticed, that if I render only the Home.js and not the App.js, I get a blank page, no errors. But when I render both Home and App, I still get the error TypeError: Cannot read property 'params' of undefined at App

MicasiO Over a year ago

I am so sorry! Everything works now, I just had to edit the index.js file, I was rendering the wrong component! Thank you so much, sorry for causing such a fuss.

kjellhaaland · Accepted Answer · 2021-01-27 08:16:23Z

0

You could try using the React hooks provided by the React Router framework. There are several different hooks used to interact with the router.

  const App = () => {
    const { roomCode } = useParams()
    console.log(params);
  };

More info here

answered Jan 27, 2021 at 8:16

kjellhaaland

1662 silver badges5 bronze badges

1 Comment

MicasiO Over a year ago

I tried that before, then I get an error: TypeError: Cannot read property 'match' of undefined at useParams

Collectives™ on Stack Overflow

TypeError: Cannot read property 'params' of undefined at App React Router

Home.js

App.js (only the relevant part)

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Home.js

App.js (only the relevant part)

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related