Route render function not returning or rendering any element

Question

So I am pretty new to React.js and not able to render an element from the Route module. The console is returning that the leaf route at location does not have an element hence renders an empty page. Other Route tags which use "element" function work correctly, so does this one. This is a snippet from the App.js file

          <Route
        path="/"
        render={(props) => (
          <ContactList
            {...props}
            contacts={contacts}
            getContactId={removeContactHandler}
          />
        )}
      />

I have been following a youtube tutorial in hopes of learning React quickly. Now some of the functions used in this tutorial are deprecated currently. So is there a different function that I should be using instead of this? Appreciate any help

Edit: The render and component function both are replaced by element prop, i found this answer helpful

I suggest you take a look at the [react router docs](https://reactrouter.com/docs/en/v6/getting-started/overview) — Casper Kuethe, Jan 24 '22 at 15:17
They have a nice FAQ for how to do stuff like pass props here, since tutorials use 5 still all over. https://reactrouter.com/docs/en/v6/upgrading/v5 — Nikki9696, Jan 24 '22 at 15:27
in the tutorial dude said that the render prop would help reduce render time since using the component prop(now using element instead as component is deprecated) would recreate the element every time which the render prop does not — Brownpanda, Jan 24 '22 at 15:29
@Nikki9696 thank you, seems render is also replaced by element now — Brownpanda, Jan 24 '22 at 15:40

score 0 · Answer 1 · answered Jan 24 '22 at 15:28

0

The React router docs has recently been updated! Meaning syntax has changed. Take a look at this answer here.

answered Jan 24 '22 at 15:28

Christopher Hallett

63
1
8

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 24 '22 at 15:44

Brownpanda · Accepted Answer · 2022-01-25T17:34:01.847

0

If anyone wants to know, from version 6 onwards render and component props is replaced by element prop that is passed as a literal instead of through an arrow function ()=>{}. This answer explains it a bit more clearly.

edited Jan 25 '22 at 17:34

answered Jan 24 '22 at 18:28

Brownpanda

78
1
9

1

apologies i meant element only. I had upvoted it, but for it be cast I need 15 reputation ;( Thank you for your answer though, helped me a lot . – Brownpanda Jan 25 '22 at 17:37

Route render function not returning or rendering any element

2 Answers2