React Router pt. 2-v6 Changes

A couple of weeks ago I wrote about React Router. In that time I had install it for a new project and my usage wasn’t functioning properly. I was getting some weird errors and wasn’t really sure where to start. I was using code I had written before and it had worked just fine in my previous build. What was happening? Well, documentation saved me once before with React Router - so that’s where I headed this time too. Turns out a new version had come out and some updates introduce breaking changes.
I figured the best way to do this would be to edit my previous instructions. Here we go. Just like before, the first thing is installing React Router (this assumes you already have a React app created):




npm install react-router-dom

Now that it’s installed- we’re still going to import BrowserRouter. Previously we imported some other pieces along with BrowserRouter and included it all in our App.js file. That’s no longer necessary. Instead in your index.js file add the following code snippet:




import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import App from './App'

Then go ahead and wrap App in the router:




ReactDom.render (
    <BroswerRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

After doing this, you can use React Router anywhere in your app.

In the previous version we’d have done the following:




const App = () => {
  return (
   <div>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/about" component={About} />
       <Route path="/shop" component={Shop} />         
     </Switch>
   </div>
 )
}

Switch is not used in v6, it’s been replaced with Routes. And the component that’s getting rendered is not written as component in this version. Instead it takes a prop, element, and we’ll pass the component that needs to be rendered as JSX. Exact path is no longer needed, which if you read my previous React Router post, this is great and will save you from a tricky potential bug. We do need to import Routes, Route and Link. Now our code should look something like this:

import {Routes, Route, Link} from ‘react-router-dom’;

const App = () => {
  return (
   <div>
     <Routes>
       <Route path="/" element={<Home/>} />
       <Route path="/about" element={<About/>} />
       <Route path="/shop" element={<Shop/>} />         
     </Routes>
   </div>
 )
}

As always, wherever you decide to use React Router, don’t forget to import all of your components:




import Home from './components/Home';
import About from './components/About';
import Stuff from './components/Stuff';

There are some other interesting changes that I’m still reading up on. But this should get you started if you’re using the latest version of React Router. I highly recommend reading the documentation. It includes information on the installation, main concepts and even has a tutorial. There's also a section that's specific to upgrading from v5 if you want to do that. Hope this helps in using the most current version of React Router. Thanks for reading!