Warning Issues with React-Router-Dom?

Hi everyone,

Wanted to ask if anyone following the Mastering React course ran into these warnings and errors regarding route registration. I just completed the Registration Form section of the course and went to go register the new route, and realized I was getting these warnings. Knowing that this is an old course, I followed the warning suggestion and ran npx react-codemod rename-unsafe-lifecycles on my root project directory. Still didn’t resolve issue, and now notice that my invalid URL path redirects are also not working. Upon entering an invalid route, I get the below issues.

Wondering if these issues are related…?

Any insight would be appreciated, thanks!

A lot of libraries has changed and it will be hard to fix if you keep using older versions.

You need to update the libraries and use the latest versions.

If you get stuck, create a new ticket here and post your code, I am sure we can assist you.

Thanks for your response, I was able to fix the issue. For anyone in the future that runs into outdated package versions, try the steps below

Package Update Resolution Steps:

  1. Install npm check updates npm install -g npm-check-updates
  2. Run npm outdated to verify outdated package versions
  3. In my case, need to update react-router-dom to 6.6.1, so I ran ncu --upgrade react-router-dom
  4. Verify the correct package update and then run npm install

For react-router-dom 6.6.1

  1. Switch has been deprecated for route switching, switch to Routes instead
  2. components in route registration must be registered as element attributes element={<LoginForm/>} for example
  3. Navigate must be imported and used for redirects (e.g., <Route path="*" element={<Navigate to="not-found" />} />)

Hope this helps someone in case they’re stuck in the future.