CODEWITHSUNDEEP
reactjsreact-router-v4
KevinS
KevinS

Reputation: 7875

In React and React Router, how to display a header on every page except home page

I'm new to React, using [email protected] and [email protected].

I am displaying a footer on every page. I would like to display a header on every page except the home page but I don't know where to start.

My current app.jsx looks like the following:

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Router>
                <div>
                    <Route exact path="/" component={HomePage} />
                    <Route exact path="/download" component={DownloadPage} />
                    <Footer />
                </div>
            </Router>
        );
    }

}

Upvotes: 4

Views: 5128

Answers (1)

Joshua Underwood
Joshua Underwood

Reputation: 927

React Router will render all routes that match a given path, since you're not using a switch. So its a simple matter of providing a route and a passing a render to it.

e.g.

<Route path="/" render={ ( props ) => ( props.location.pathname !== "/") && <Header /> }>

replace the props.location.pathname check where it has '/' with whatever you want (/home for example) and it won't render the component for that route.

render() {
    return (
        <Router>
            <div>
                <Route path="/" render={ ( props ) => ( props.location.pathname !== "/") && <Header /> }>
                <Route exact path="/" component={HomePage} />
                <Route exact path="/download" component={DownloadPage} />
                <Footer />
            </div>
        </Router>
    );
}

Upvotes: 7

Related Questions