Add Profile Route

Outline

In this video, we'll use react-router-dom to add a route to the Profile component we created in the last video.

We need to update App.js with the following:

import React from 'react';
import NavBar from './components/NavBar';
import { useAuth0 } from './react-auth0-spa';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Profile from './components/Profile';

function App() {
  const { loading } = useAuth0();

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div className="App">
      <BrowserRouter>
        <header>
          <NavBar />
        </header>
        <Switch>
          <Route path="/" exact />
          <Route path="/profile" component={Profile} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

You should be able to run npm start, log in, and then navigate to localhost:3000/profile in your browser URL bar.

This is cool, but let's make it easier to get here by adding some links to our NavBar in the next video.

Go Pro to unlock all content & remove ads

Outline

Outline

I finished! On to the next chapter