Let’s create the routes for oura react project.

We are using the LandingPage as an example from the last guide LandingPage with styled-components.

I already created the Dashboard component in components folder.

Install react-router-domPermalink

Let’s install react-router-dom.

This library is used to create the routing in react apps.

yarn add react-router-dom

Create Route for LandingPage in App.jsPermalink

Let’s create our routing in App.js file.

We should see something like this:

function App() {
  return (
    
  );
}
export default App;

BrowserRouter component from react-router-dom:Permalink

BrowserRouter allows us to access to the navigation history, do redirections, etc.

This component is better for dynamics request (if you want to serve statics request you should use HashRouter).

import { BrowserRouter as Router } from "react-router-dom";

function App() {
  return (
    <Router>
    </Router>
  );
}

export default App;

Switch component from react-router-dom:Permalink

Switch allows us to render only the first Route child or Redirect that matches with our path.

When a <Switch> is rendered, it searches through it’s children <Route> elements to find one whose path matches the current URL.

When it finds one, it renders that <Route> and ignores all others.

This means that you should put <Route>s with more specific (typically longer) paths before less-specific ones. If no <Route> matches, the <Switch> renders nothing (null).

import { Switch } from "react-router-dom";
function App() {
  ...
    <Router>
      <Switch>
      </Switch>
    </Router>  
  ...
}
export default App;

Route component from react-router-dom:Permalink

Route renders some UI when its path matches the current URL.

This component has some properties:

• Path: the route where we have to render our component. We can pass a string or array string.
• Exact: this is going to render the component only if the path specify is exactly the same. Example: /home === /home.

import { Route } from "react-router-dom";
import { LoginPage } from './components/LoginPage'

function App() {
  ...
    <Switch>
      <Route exact path={"/"}>
        <LoginPage />
      </Route>
    </Switch>
  ...
}

export default App;

Create Route for Dashboard in App.jsPermalink

Let’s create the route for Dashboard by adding another <Route> component with the path and the component to render.

import { Dashboard } from './components/Dashboard'

function App() {
  ...
    <Route key="home" exact path={"/"}>
        <LoginPage />
    </Route>
    <Route key="dashboard" exact path={"/dashboard"}>
        <Dashboard />
    </Route>
  ...
  );
}

export default App;

Redirect to URL when click a buttonPermalink

Let’s go to the Dashboard page when we click in the login button (in LoginPage.js) and to the LoginPage when we click on back button (in Dashboard.js)

In LoginPage.js, let’s add href with the path that we created.

export class LoginPage extends React.Component{
    render(){
        return(
        ...
          <RightColumnSpaces>
              <StyledButton href={"/dashboard"}>Login <FontAwesomeIcon icon={faSignInAlt}/></StyledButton>
          </RightColumnSpaces>
        ...
        )
    }
}

Create constants for paths:Permalink

We wrote "/dashboard" in LoginPage.js and in App.js.

If we have the same text used in several files, we should create constants. This way you avoid writing problems.

Create file for Routes constants:Permalink

Let’s create the file for our constants (src/routes/Routes.js).

cd src
mkdir routes
touch Routes.js

Define constants:Permalink

In routes.js let’s create a constant and export it.

const routes = {
  home: '/',
  dashboard: '/dashboard',
}

export default routes;

Use the constants in the files:Permalink

Let’s use our constants. First import the constants and then replace them.

In App.js:Permalink

import Routes from “./routes/routes”;

function App() {
  ...
    <Route key="home" exact path={Routes.home}>
        <LoginPage />
    </Route>
    <Route key="dashboard" exact path={Routes.dashboard}>
        <Dashboard />
    </Route>
  ...
  );
}

export default App;

In Landing.js:Permalink

import Routes from "../routes/routes";
export class LandingPage extends React.Component{
  ...
   <RightColumnSpaces>
      <StyledButton href={Routes.dashboard}>Login <FontAwesomeIcon icon={faSignInAlt}/></StyledButton>
    </RightColumnSpaces>
  ...
}

In Dashboard.js:Permalink

import Routes from '../routes/routes'
export class Dashboard extends React.Component{
  ...
   <Button href={Routes.home} variant="secondary">Back</Button>
  ...
}