Search⌘ K
Home/
Courses/
Beginning Node.js, Express & MongoDB Development

Defining the Routes

Let's learn how to define routes in a React application.

We'll cover the following...

In this lesson, we’ll define the routes of our Navbar. The code files created previously have been provided below as a starting point:

import React from 'react' 
function Login() {
    return (
        <div className="App">
            Login 
        </div>
    ); 
}
export default Login;
The initial files we will build on

Adding the routes

After the navbar section in the App.js file, add the route section by adding the code below:

C++
<div className="App">
    <Navbar bg="light" expand="lg">
        ... 
    </Navbar>
    <Switch>
        <Route exact path={["/", "/movies"]} component={MoviesList}> 
        </Route>
        <Route path="/movies/:id/review" render={(props)=>
            <AddReview {...props} user={user} />
        }>
        </Route>
        <Route path="/movies/:id/" render={(props)=>
            <Movie {...props} user={user} /> 
        }>
        </Route>
        <Route path="/login" render={(props)=>
            <Login {...props} login={login} /> 
        }>
        </Route>
    </Switch>
</div>

We use a Switch component to switch between different routes. The ...