I am making a landing page for my site, which will have 3 ponents - header, main and footer, only for the landing page. The header ponent is just a nav bar with a logo on the left and sign in button on the right.

When the sign in button is clicked, I render a login route using the router but the problem is the previous ponents of Landing page (Header, Main and Landing) are also rendered with the new routed Login ponent.

Here's my App.js file where Landing is inserted.

import React, {Component} from 'react';

import Landing from './ponents/Landing/Landing';

class App extends Component {
    render() {
        return (
            <div className="App">
                <Landing/>
            </div>
        );
    }
}

export default App;

and in Landing ponent I have this setup:

import React, {Component} from 'react';

import Header from './Header';
import Main from './Main';
import Footer from './Footer'

class Landing extends Component {
    render() {

        return (
            <div className="container__landing">
                <Header/>
                <Main/>
                <Footer/>
            </div>
        );
    }
}

export default Landing;

Here's my header ponent, for brevity I have left out the other two ponents:

import React, {Component} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import {Route, Switch} from 'react-router';
import Login from '../auth/Login';

class Header extends Component {
    render() {
        return (
            <Router>
                <header className="header">
                    <div className="header__nav">
                        <p>STRONG LIVE</p>
                        <button className="sign_in">
                            <Link to="/login">
                                Sign In
                            </Link>
                        </button>
                    </div>
                    <Route exact path="/login" ponent={Login}/>
                </header>
            </Router>
        )
    }
}
export default Header;

The login ponent is rendered but it's placed inside the landing ponent along with the header and other present ponents.

I want the login page to be stand-alone and without the header, which is currently above it. I have seen some tutorial where they have used the props.history.push('/path) but in React Dev Tools, none of my ponents have these props. How do I switch ponents on button click? Thank you.

I am making a landing page for my site, which will have 3 ponents - header, main and footer, only for the landing page. The header ponent is just a nav bar with a logo on the left and sign in button on the right.

When the sign in button is clicked, I render a login route using the router but the problem is the previous ponents of Landing page (Header, Main and Landing) are also rendered with the new routed Login ponent.

Here's my App.js file where Landing is inserted.

import React, {Component} from 'react';

import Landing from './ponents/Landing/Landing';

class App extends Component {
    render() {
        return (
            <div className="App">
                <Landing/>
            </div>
        );
    }
}

export default App;

and in Landing ponent I have this setup:

import React, {Component} from 'react';

import Header from './Header';
import Main from './Main';
import Footer from './Footer'

class Landing extends Component {
    render() {

        return (
            <div className="container__landing">
                <Header/>
                <Main/>
                <Footer/>
            </div>
        );
    }
}

export default Landing;

Here's my header ponent, for brevity I have left out the other two ponents:

import React, {Component} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import {Route, Switch} from 'react-router';
import Login from '../auth/Login';

class Header extends Component {
    render() {
        return (
            <Router>
                <header className="header">
                    <div className="header__nav">
                        <p>STRONG LIVE</p>
                        <button className="sign_in">
                            <Link to="/login">
                                Sign In
                            </Link>
                        </button>
                    </div>
                    <Route exact path="/login" ponent={Login}/>
                </header>
            </Router>
        )
    }
}
export default Header;

The login ponent is rendered but it's placed inside the landing ponent along with the header and other present ponents.

I want the login page to be stand-alone and without the header, which is currently above it. I have seen some tutorial where they have used the props.history.push('/path) but in React Dev Tools, none of my ponents have these props. How do I switch ponents on button click? Thank you.

• javascript
• reactjs
• react-router

1 Answer 1

When the URL will match the path property of your <Route> ponent, a.k.a. when you'll be on the /login page, React router will render your <Login> ponent at the place in your ponent tree where the corresponding <Route> is.

The problem is that your <Router>, and more specifically your login <Route> are inside the <Landing> ponent.

If you want the login page to be rendered without header, you should place both the <Landing> and <Login> ponents inside a <Route>, next to each other. Then, render them conditionally using React Router's <Switch>ponent :

A <Switch> will iterate over all of its children elements and only render the first one that matches the current location. (see the documentation for details)

Here's an (untested) example :

class App extends Component {
    render() {
        return (
            <div className="App">
                <Router>
                    <Switch>
                        {/* Render the login ponent alone if we're on /login */}
                        <Route exact path="/login" ponent={Login} />

                        {/* Otherwise, render the Landing ponent */}
                        <Route ponent={Landing} />
                    </Switch>
                </Router>
            </div>
        );
    }
}