# React Router not working

**URL:** <https://forum.kirupa.com/t/react-router-not-working/652078>\
**Category:** web dev\
**Created:** [June 3, 2022, 2:37am UTC](https://forum.kirupa.com/t/react-router-not-working/652078 "2022-06-03T02:37:54Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ReactNoob](https://avatars.discourse-cdn.com/v4/letter/r/9e8a1a/32.png) [@ReactNoob](https://forum.kirupa.com/u/ReactNoob)\
**Post date:** [June 3, 2022, 2:37am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/1 "2022-06-03T02:37:54Z")

</div>

> **[Creating a Single-Page App in React using React Router](https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)**
>
> Kick your React skills up a few notches by learning how to use React Router to create a sweet single-page app.

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!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 3, 2022, 3:46am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/2 "2022-06-03T03:46:42Z")

</div>

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

🙂

---

<div class="post-metadata">

**Author:** ![ReactNoob](https://avatars.discourse-cdn.com/v4/letter/r/9e8a1a/32.png) [@ReactNoob](https://forum.kirupa.com/u/ReactNoob)\
**Post date:** [June 3, 2022, 2:59pm UTC](https://forum.kirupa.com/t/react-router-not-working/652078/3 "2022-06-03T14:59:53Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 4, 2022, 3:26am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/4 "2022-06-04T03:26:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ReactNoob](https://avatars.discourse-cdn.com/v4/letter/r/9e8a1a/32.png) [@ReactNoob](https://forum.kirupa.com/u/ReactNoob)\
**Post date:** [June 4, 2022, 10:00pm UTC](https://forum.kirupa.com/t/react-router-not-working/652078/5 "2022-06-04T22:00:59Z")

</div>

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:

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 6, 2022, 3:59am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/6 "2022-06-06T03:59:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AhmedSaad](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ahmedsaad/32/17943_2.png) [@AhmedSaad](https://forum.kirupa.com/u/AhmedSaad)\
**Post date:** [June 14, 2022, 8:18am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/7 "2022-06-14T08:18:37Z")

</div>

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](http://gmail.com) `<Routes> <Route...> <Route...> <Route> </Routes>`

---

<div class="post-metadata">

**Author:** ![AhmedSaad](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ahmedsaad/32/17943_2.png) [@AhmedSaad](https://forum.kirupa.com/u/AhmedSaad)\
**Post date:** [June 14, 2022, 8:19am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/8 "2022-06-14T08:19:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AhmedSaad](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ahmedsaad/32/17943_2.png) [@AhmedSaad](https://forum.kirupa.com/u/AhmedSaad)\
**Post date:** [June 14, 2022, 8:41am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/9 "2022-06-14T08:41:12Z")

</div>

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

```auto
<Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/Stuff" element={<Stuff/>}/>
                    <Route path="/Contact" element={<Contact/>}/>
</Routes>

```

---

<div class="post-metadata">

**Author:** ![yvonne713](https://avatars.discourse-cdn.com/v4/letter/y/a8b319/32.png) [@yvonne713](https://forum.kirupa.com/u/yvonne713)\
**Post date:** [April 24, 2023, 5:49am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/11 "2023-04-24T05:49:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MindMade\_Technologie](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mindmade_technologie/32/21531_2.png) [@MindMade\_Technologie](https://forum.kirupa.com/u/MindMade_Technologie)\
**Post date:** [April 24, 2023, 6:24am UTC](https://forum.kirupa.com/t/react-router-not-working/652078/12 "2023-04-24T06:24:11Z")

</div>

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