React Router has upgraded from v5 to v6 (Impact on the whole project)

[moyales]

The beginning steps of "A React Project" have been rendered outdated in the 2020 edition of the book, as React Router has moved on to v6 on November 3, 2021. As such, certain parts mentioned will not work anymore, such as:

import {
  BrowserRouter as Router,
  Switch, // Switch has been changed to "Routes"
  Route,
  Redirect,
} from "react-router-dom";

On top of that, <Route /> will not work as the provided code in step 02 has it now, even after the name substitution from Switch to Routes. Page will render blank and display this warning in the console:

<Route /> now only supports an element prop, which is incompatible with the current code structure. A name substitution such as render to element will not work either. The following error in console will occur:

The above issue can be remedied if the line

<Route exact path="/" render={() => <Posts posts={posts} />} />

is changed to

<Route exact path="/" element={<Posts posts={posts} />} />

A similar issue as the one just mentioned is present for the block of code responsible for rendering a single post:

<Route
            path="/post/:postSlug"
            render={(props) => {
              const post = posts.find(
                (post) => post.slug === props.match.params.postSlug
              );
              if (post) return <Post post={post} />;
              else return <NotFound />;
            }}
          />

[mveenstra]

I was having issues getting the code in step 2 to work. Based off of @moyales comment above, I downgraded the version of React Router and once I did this, the code work properly. I chose a random version of React Router v5.

npm install react-router-dom@5.0.0
npm start

[jmanuelrios74]

I was having issues getting the code in step 2 to work. Based off of @moyales comment above, I downgraded the version of React Router and once I did this, the code work properly. I chose a random version of React Router v5.

npm install react-router-dom@5.0.0 npm start

Thanks, followed your suggestion and it worked perfectly.

[morrnel]

Still not fxed.
Reversing to v5 is kind of like going back to the horse and buggy.

[reidbuchanan]

anyone resolve this without reverting to v5?
I don't believe <Route exact path="/" element={} /> is working

[austBrink]

As a learner, trying to get things to work with react-router 6 is good. It's easy and super clean. The post route example that @moyales mentioned goes from

<Route
    path = '/post:postSlug'
    element = {(props) => {
         const post = posts.find(
             (post) => post.slug === props.match.params.postSlug
         );
         return <Post post = {post} />;
     }}
/>

to

<Route 
    path = '/post/:postSlug'
    element = {<Post posts = {posts} />}
/>

And the logic to find the right post is now the Post.js component's responsibility.

const { postSlug } = useParams();
const post = posts.find(
    (post) => post.slug === postSlug
);

good reference