React Router not working

programming web dev
1

Has anyone tried to work through this tutorial? For some reason when I add the content div with routes to the main Component my project stops loading anything. If anyone has any advice or can spot the issue please let me know!

1 Like
2

Hi @ReactNoob - Is there an error in your console? If so, can you please share it?

:slight_smile:

3

@kirupa The confusing part is that I get a ‘webpack compiled successfully’ but none of the content is showing up. My inclination is that something with the framing breaks but I am not sure as I am so new to the language. I did, however, copy your code step by step so it might be a change to the library? I am unsure. Thank you for your help!

4

Can you share your project? That is a bit puzzling!

5

I don’t have it up on gitlab or anything and I can’t upload a .zip

here is the contents of the Main.js:

import React, { Component } from "react";

import {

  Route,

  NavLink,

  HashRouter

} from "react-router-dom";

import Home from "./Home";

import Stuff from "./Stuff";

import Contact from "./Contact";

class Main extends Component {

  render() {

    return (

      <HashRouter>

        <div>

          <h1>Simple SPA</h1>

          <ul className="header">

            <li><NavLink to="/">Home</NavLink></li>

            <li><NavLink to="/stuff">Stuff</NavLink></li>

            <li><NavLink to="/contact">Contact</NavLink></li>

          </ul>

          <div className="content">

            <Route exact path="/" component={Home}/>

            <Route path="/stuff" component={Stuff}/>

            <Route path="/contact" component={Contact}/>

          </div>

        </div>

      </HashRouter>

    );

  }

}

 

export default Main;
6

Can you please e-mail me the zip file to kirupa[at]gmail.com? I’ll take a look at it. So far, you have me stumped :octopus:

7

Just spent like 3 hours trying to figure out what happened. The code was fine, after the part where we added the “Route” nothing loaded on the webpage. So turns out we also have to import “Routes” when we are importing from react router. and we have to surround all our route calls with the Routes tag, like ive shown below. let me know if you want the whole code at aasaad26[at]gmail.com <Routes> <Route...> <Route...> <Route> </Routes>

8

anyways thank you admin for the tutorial, it was helpful <3

9

a few other changes were made to make it work perfectly:

<Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/Stuff" element={<Stuff/>}/>
                    <Route path="/Contact" element={<Contact/>}/>
</Routes>
1 Like
11

I just wanted to say THANK YOU for sharing the code for getting the React Router to work now. Much appreciated!

1 Like
12

Nice, Interesting to know about this issues and also getting the solutions for it.