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

user_118268 0
Viewed 4009

I'm new to React, using react@16.0.0 and react-router-dom@4.2.2.

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

}
react-router-v4 reactjs
1 Answers

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>
    );
}
user_53178600
Related