Nesting Routing Is Not Working on React

Question

I"m trying to have nested routing in my node application. Originally I had all the routes in my App.jsx and it worked fine. I decide to go with nesting routes to better handle data from child to parent.

When I set up nesting routes the page goes to the url but my component is not rendered. I put the route back into my App.jsx, everything is fine.

I've tried HashRouter instead of BrowserRouter since my app is (for now) only rendering a static page but it did not help.

I also used update blocker referenced in the link below but alas, it also did not work

Please help this newbie!

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Index.jsx

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}

export default App;

My App.jsx

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}
export default App;

LoginRoute.jsx

import React, { Component } from "react";
import Home from "./HomePage";
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import Login from "./Login"
import SignUp from "./SignUp";


const LoginRouting = ({}) => (
  <Login>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route exact path="/Home" component={Home} />
      <Route exact path="/SignUp" component={SignUp} />
    </Switch>
  </Login>
);

export default LoginRouting;

Login.jsx

import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import fetch from "isomorphic-fetch";
import axios from "axios";
import styles from "./Login.css";
import Problem from "./ProblemOccured";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      userName: "",
      email: "",
      signUp: false,
      login: false,
      problem: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);

  }


  handleSubmit(events) {
    events.preventDefault();

    axios
      .post(window.location.href + "api/users/login", {
        email: events.target.email.value,
        password: events.target.password.value
      })
      .then(res => {
        this.setState({ login: true });
      })
      .catch(err => {
        this.setState({ problem: true });
        console.log(err);
      });
  }
  handleSignUp(events) {
    events.preventDefault();
    this.setState({ signUp: true });
  }
  render() {
    let error;
    if (this.state.signUp) {
      console.log("Attempting To Change Page To SignUp");
      return <Redirect push to="/SignUp" />;
    }
    if (this.state.login) {
      console.log("Attempting To Change Page To Home");
      return <Redirect push to="/Home"/>;
    }
    if (this.state.problem) {
      error = <Problem />;
    }
    return (
        <center>
          <h1 id="header">It's Purrrrrrrrrrfect</h1>
          {error}
          <form className="form" onSubmit={this.handleSubmit}>
            <label>
              <input type="text" name="email" placeholder="Email" />
              <br />
              <input type="password" name="password" placeholder="Password" />
            </label>
            <br />
            <input type="submit" />
          </form>
          <button onClick={this.handleSignUp}>SignUp</button>
        </center>);
  }
}

export default Login;

Answer 1

There is no 'real' nested routing in React, since all you do is rendering each component on the same exact html file (VirtualDOM -> DOM).

The only 'real' nested routing should be in your backend. In your example it seems that you use axios in order to get/post data to your backend.

What you want to do is not really necessary and could be done with components/ const as well. However, if you want to nest your components inside a root component, you need to change the code like so:

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



</Route>

then, you add all routes you want to be 'nested' within your root route, like so:

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

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

    </Route>

this will do the job. Use Home for active links.

Greetings!