How to set up routing in ReactJS?

Question

I am trying to set up routing to navigate to different pages within my web app. The home page renders just fine. It is only when I try to navigate to a different page. When I navigate to a different page, it returns the below following:

App.js

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import React from 'react'
import { Component } from 'react';
import ReactDOM from "react-dom"
import Nav from '../navigation/Nav'
import '../css/App.css'
import About from '../components/About'
import Shop from '../components/Shop'

function App(){ 
return (
        <Router>
            <div className="App">
                <Nav /> 
                <Route path="/about" component={About} />           
            </div>
        </Router>
    )       
    }


export default App

About.js

import React from 'react'


function About(){
    return (
        <div className="About">
            <h1>This is the About page</h1>
        </div>
    )
}

export default About

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My React App</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

index.html
ReactDOM.render( < App /> , document.getElementById('app'));

**Edit: **
versions:

    "dependencies": {
        "react": "^16.11.0",
        "react-dom": "^16.11.0",
        "react-router-dom": "^5.1.2"
    }

Which version of react-router are you using?

Jim G.
– Jim G.

2019-10-25 17:29:25 +00:00
Commented Oct 25, 2019 at 17:29 — Jim G.
– Jim G., Commented Oct 25, 2019 at 17:29
@JimG. updated the question. It is v5.1.2.

QThompson
– QThompson

2019-10-25 17:31:18 +00:00
Commented Oct 25, 2019 at 17:31 — QThompson
– QThompson, Commented Oct 25, 2019 at 17:31
try using exact keyword just aside the path in App.js

Ronak Khangaonkar
– Ronak Khangaonkar

2019-10-25 17:31:45 +00:00
Commented Oct 25, 2019 at 17:31 — Ronak Khangaonkar
– Ronak Khangaonkar, Commented Oct 25, 2019 at 17:31
@RonakKhangaonkar I had already tried that. Same result

QThompson
– QThompson

2019-10-25 17:32:14 +00:00
Commented Oct 25, 2019 at 17:32 — QThompson
– QThompson, Commented Oct 25, 2019 at 17:32
Can we see Nav.js?

Jschriemer
– Jschriemer

2019-10-25 21:59:54 +00:00
Commented Oct 25, 2019 at 21:59 — Jschriemer
– Jschriemer, Commented Oct 25, 2019 at 21:59

Jschriemer · Accepted Answer · 2019-10-25 17:54:59Z

3

Try changing your <Router> in the App.js file to:

<Router>
  <div>
    <Nav />
    <Switch>
         <Route exact component={withRouter({About})} path="/about" />
    </Switch>
  </div>

You'll want to use exact as it returns any number of routes that match exactly. I added the switch as it renders the first child <Route> that matches the location.

Edit: Youll also have to change your Nav component. Example for one of the links in the nav bar:

<li class="nav-item">
      <Link to='/about' class="nav-link" href="/about">About</Link>
</li>

making sure to include: import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; in the Nav.js component!

edited Oct 25, 2019 at 17:54

answered Oct 25, 2019 at 17:45

Jschriemer

6251 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rahulfaujdar · Accepted Answer · 2020-12-06 08:15:58Z

Set up routing used with class component

App.js

import React from 'react';
import {BrowserRouter as Router, Route,Link} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Services from './Services';

export default class App extends React.Component{
  render(){
    return(
          <Router>
            <Link to="/">Home </Link>
            <Link to="/about"> About </Link>
            <Link to="/services"> Services</Link>

            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/services" component={Services} />
          </Router>
        )
    }
}

Home.js

import React from 'react';

export default class Home extends React.Component{
  render(){
     return(
        <h2>This is the Home page</h2>
        )
   }
}

About.js

import React from 'react';

export default class About extends React.Component{
render(){
    return(
        <h2>This is the About page</h2>
        )
   }
}

Services.js

import React from 'react';

export default class Services extends React.Component{
render(){
    return(
        <h2>This is the Services page</h2>
        )
    }
 }

Collectives™ on Stack Overflow

How to set up routing in ReactJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related