CODEWITHSUNDEEP
reactjsreact-router
QThompson
QThompson

Reputation: 1708

How to set up routing in ReactJS?

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:

enter image description here

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"
    }

Upvotes: 3

Views: 1202

Answers (2)

rahulfaujdar
rahulfaujdar

Reputation: 223

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>
        )
    }
 }

Upvotes: 0

Jschriemer
Jschriemer

Reputation: 625

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!

Upvotes: 3

Related Questions