Rendering nested router view without parent router view - React.js

Question

Hello community :) My first Q here. (There were couple of similar questions but they didn't answer my particular code issue and I tried them to apply but without success.)

So I would like to render the child component in nested route without the parent one showing in the view See the picture at the end --->

import React from 'react';
import {BrowserRouter, Route, Switch, Link} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';

import Routing from "./components/Routings";



export default class Browserrouting extends React.Component {
  render () {
    return (
      <BrowserRouter>
        <Routing/>
      </BrowserRouter>
    )
  }
}

Here is the Routing component :

import About from "../views/About";
import HomeBackground from "../views/Background";
import ShelterApp from '../views/ShelterApp';


export default (props) => (
    <div className="flexColumn">
        <div> <ul className="flexRow center">
            <li className="homeLink"><Link className="colorBrown" to="/">Home</Link></li>
            <li className="homeLink"><Link className="colorBrown" to="/shelterApp">Shelter App</Link></li>

            <li className="homeLink"><Link className="colorBrown" to="/about">About our site and shelter</Link></li>
        </ul></div>

        <Switch>
            <Route exact path="/" component={() => <HomeBackground />} />
            <Route path="/about" component={() => <About />} />
            <Route path="/shelterApp" component={() => <ShelterApp />} />
        </Switch>
    </div>

)

And in ShelterApp component I have some text and imported another component which contains the links and nested routes I would like to display without showing the parent component ShelterApp:

class ShelterApp extends React.Component {
    render() {
        return (   
             <div className="flex center">
               
        <div className="card center" style={{ "width": "25em", "height":"25em" }}>
            <div className="card-body textCenter">
                <h5 className="card-title paddingTitle">Welcome to our site</h5>
                <h6 className="card-subtitle mb-2 text-muted"> Login or register if it's your first time</h6>
        
            </div>
            <LoginRouting match={this.props.match} />
        </div>
        
        </div>)
    }

}

export default ShelterApp;

and the final child componet with the "lowest" routes in hierarchy :

class LoginRouting extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            users: []
        }
    }
    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
    };

    render() {
        const { match, location, history } = this.props;

        return (
            <div >
                <div className="flexRow center">
                    <Button className={" loginRouting"} type={"button"} bootstrapClass={"btn btn-light"} child={<Link to="/shelterApp/login">Login form</Link>} />
                    <Button className={" loginRouting"} type={"button"} bootstrapClass={"btn btn-light"} child={<Link to="/shelterApp/register">Register form</Link>} />
                </div>
                <div>

                    <Route path="/shelterApp/login" render={() => <Login />} />

                    <Route path="/shelterApp/register" render={() => <Register />} />

                </div>
            </div>
        )
    }

}

export default withRouter( LoginRouting)

enter image description here

IMAGE with the view : I will be thankful for any advises !

Answer 1

On your ShelterApp component you can create a new state called hideInfo, or something, that tracks if the user clicked on "Login form" or "Register form".

Then you can pass a props to your <LoginRouting> component. When the user clicks on "Login form" or "Register form" you change this.hideInfo.

<LoginRouting onShowForm={() => this.setState({ hideInfo: !hideInfo})} match={this.props.match} />