Creating a Single-Page App in React using React Router

programming
42

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

I really appreciate your taking a look, too

1 Like
43

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

44

have been solve

45

image
image.png1040×928 116 KB

1 Like
46

Follow this

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

What is the problem here? :slight_smile:

48

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

1 Like
49

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?

50

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

51

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

54

Can you please make the same single page application using next js router , please I request or send me the code : mail : [email protected]

55

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

56

Can you share the contents of index.tsx?

57

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
image575×616 24.9 KB

it’s index.tsx
P. S. Studied by the book