# Creating a Single-Page App in React using React Router

**URL:** <https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201>\
**Category:** programming\
**Created:** [March 20, 2017, 1:42am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201 "2017-03-20T01:42:15Z")\
**Posts on this page:** 14\
**Page:** 3

<div class="post-metadata">

**Author:** ![tomizechsterson](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tomizechsterson/32/9167_2.png) [@tomizechsterson](https://forum.kirupa.com/u/tomizechsterson)\
**Post date:** [June 12, 2018, 8:08pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/42 "2018-06-12T20:08:37Z")

</div>

Yeah, I agree, as long as it works. Oh well, no worries, haha

I really appreciate your taking a look, too

---

<div class="post-metadata">

**Author:** ![matthewjwhitney](https://avatars.discourse-cdn.com/v4/letter/m/ccd318/32.png) [@matthewjwhitney](https://forum.kirupa.com/u/matthewjwhitney)\
**Post date:** [June 13, 2018, 5:10am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/43 "2018-06-13T05:10:52Z")

</div>

Is the finished code for this tutorial hosted somewhere? Thanks!

---

<div class="post-metadata">

**Author:** ![Van\_Long](https://avatars.discourse-cdn.com/v4/letter/v/b782af/32.png) [@Van\_Long](https://forum.kirupa.com/u/Van_Long)\
**Post date:** [November 23, 2018, 9:20am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/44 "2018-11-23T09:20:53Z")

</div>

have been solve

---

<div class="post-metadata">

**Author:** ![Van\_Long](https://avatars.discourse-cdn.com/v4/letter/v/b782af/32.png) [@Van\_Long](https://forum.kirupa.com/u/Van_Long)\
**Post date:** [November 23, 2018, 9:24am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/45 "2018-11-23T09:24:10Z")

</div>

![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/b/b966819666eec4874b5edf7a8cb623ff8d12a167.png)

---

<div class="post-metadata">

**Author:** ![john\_Morris](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@john\_Morris](https://forum.kirupa.com/u/john_Morris)\
**Post date:** [December 13, 2018, 12:05pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/46 "2018-12-13T12:05:34Z")

</div>

Follow this

```auto
import React, {
  Component
} from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import Home from './Home'
import Stuff from './Stuff’
import Contact from './Contact'

export default class Main extends Component {

  render() {
    return (
      <Router>
        <div>
          <h1>Simple SPA</h1>
          <ul className="header">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li><a href="/stuff">Stuff</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
          <div className="content">
            <Route exact path="/" component={Home}/>
            <Route path="/stuff" component={Stuff}/>
            <Route path="/contact" component={Contact}/>
          </div>
        </div>
      </Router>
      )
  }
}

```

---

<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:** [December 13, 2018, 5:41pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/47 "2018-12-13T17:41:35Z")

</div>

What is the problem here? 🙂

---

<div class="post-metadata">

**Author:** ![SwethaB](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@SwethaB](https://forum.kirupa.com/u/SwethaB)\
**Post date:** [March 21, 2019, 7:21am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/48 "2019-03-21T07:21:54Z")

</div>

Thank you for a very well written, detailed article. This post is a very good start to understand React router for SPA 🙂

---

<div class="post-metadata">

**Author:** ![Siva\_K](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@Siva\_K](https://forum.kirupa.com/u/Siva_K)\
**Post date:** [March 27, 2019, 11:27am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/49 "2019-03-27T11:27:43Z")

</div>

I created build for this application, and then i kept that folder on httpd server. But it’s not working. Am I did any thing wrong here?

---

<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:** [March 27, 2019, 9:20pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/50 "2019-03-27T21:20:19Z")

</div>

What error are you seeing? Are the paths to the JS and CSS still accurate in the HTML file?

---

<div class="post-metadata">

**Author:** ![Gopal\_Singh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gopal_singh/32/9734_2.png) [@Gopal\_Singh](https://forum.kirupa.com/u/Gopal_Singh)\
**Post date:** [July 5, 2019, 6:48am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/51 "2019-07-05T06:48:20Z")

</div>

index.js \>\>\>  
import React from ‘react’;  
import ReactDOM from ‘react-dom’;  
import Home from ‘./Home’;  
ReactDOM.render(\< Home /\>, document.getElementById(‘root’));

Home.js  
import React, {Component} from ‘react’;  
import ReactDOM from ‘react-dom’;  
import {  
Route,  
NavLink,  
HashRouter  
} from “react-router-dom”;  
import Login from ‘./Login’;  
import SignUp from ‘./SignUp’;  
class Home extends Component {  
render (){  
return (  
\< HashRouter\>  
\< div\>  
\< ul\>  
\< li\>\< NavLink to="/ SignUp"\>SignUp\</ NavLink\>\< /li\>  
\< /ul\>  
\< /div\>  
\</ HashRouter\>);  
}  
}  
export default Home;

SignUp.js  
import React, {Component} from ‘react’;  
import ReactDOM from ‘react-dom’;  
import SignUpCSS from ‘./SignUpCSS.css’

class SignUp extends Component {  
render(){ return (

  
  

  

# Sign Up
  

Please fill in this form to create an account.

  

* * *

```
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required/>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required/>

<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required></input>

<label>
  <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me </input>
</label>

<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

<div class="clearfix">
  <button type="button" class="cancelbtn">Cancel</button>
  <button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>);

```

}}  
export default SignUp;

Please find the above three page  
I am not able to redirect SignUp even not getting any error whats I am missing here

---

<div class="post-metadata">

**Author:** ![Sushila\_Kaushik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sushila_kaushik/32/14436_2.png) [@Sushila\_Kaushik](https://forum.kirupa.com/u/Sushila_Kaushik)\
**Post date:** [May 4, 2021, 11:09am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/54 "2021-05-04T11:09:13Z")

</div>

Can you please make the same single page application using next js router , please I request or send me the code : mail : [sushilakaushik1983@gmail.com](mailto:sushilakaushik1983@gmail.com)

---

<div class="post-metadata">

**Author:** ![geekYuval](https://avatars.discourse-cdn.com/v4/letter/g/b4bc9f/32.png) [@geekYuval](https://forum.kirupa.com/u/geekYuval)\
**Post date:** [December 31, 2021, 1:16pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/55 "2021-12-31T13:16:22Z")

</div>

Hi,  
I’m following this tutorial by writing it step by step and always get this yellow blank page with Error:  
index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .  
what did i do wrong?

 ![blank page with error](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/1/8/18b0672f9b5e83f912966778499799571575ecee.jpeg)

---

<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:** [January 4, 2022, 3:14am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/56 "2022-01-04T03:14:53Z")

</div>

Can you share the contents of **index.tsx**?

---

<div class="post-metadata">

**Author:** ![ZooMbx](https://avatars.discourse-cdn.com/v4/letter/z/3ab097/32.png) [@ZooMbx](https://forum.kirupa.com/u/ZooMbx)\
**Post date:** [January 18, 2022, 11:55pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/57 "2022-01-18T23:55:33Z")

</div>

Hi,  
Exactly the same mistake, I’ve already tried everything. I installed React Router DOM, then inserted files from your GitHub and still gives the same thing. Maybe something with the version? (my versions:  
“react”: “^17.0.2”,  
“react-home”: “^17.0.2”,  
“react-router-home”: “^6.2.1”,)

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/1/e/1e849013ad9db390e01b495542b2778e6c89778c.png)  
it’s **index.tsx**  
_P. S._ Studied by the book

[Previous page](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201.md?page=2)