Why can't I access other pages of my react app

Question

So I have been messing around with ReactJS and I got stuck with not being able to access my other pages. I am not sure what is the problem with the code below.

I am trying to make a multi page app with React, so I would like to have some of my pages to have different headers, like have some extra buttons or links.

index.js

import React from 'react';
import createHistory from 'history/createBrowserHistory';
import ReactDOM from 'react-dom';
import { Route, Switch, Router } from 'react-router-dom';
import {Provider} from "react-redux";
import Home from "./_components/home/home"
import Header from "./_components/header/header";

//import './scss/style.scss'; // importing SASS

ReactDOM.render(
  <Router history={createHistory()}>
    <div>
        <Route exact path="/" component={Header}/>
    </div>
  </Router>,
  document.getElementById('root'),
);

header.js

import React, {Component} from 'react';
import {Link,Route,withRouter} from 'react-router-dom';

import Home from '../home/home';
import SignIn from '../signin/signin';
import CreateProjects from '../create_projects/create_projects';
import PostHeader from '../header/post_header';
import PreHome from '../home/pre_home';

class Header extends Component{
    render(){
        return(
            <div className="container">
                <div>
                    <h3>The Web App</h3>
                        <nav>
                            <ul>
                                <li><Link to="/signin-signup">Sign in?</Link></li>
                                <li><Link to="/home">Home</Link></li>
                                <li><Link to="/create-projects">Create</Link></li>
                                <li><Link to="/signed-in">Signed in</Link></li>
                            </ul>
                        </nav>
                    <hr />
                </div>
                <Route path="/home" component={Home}/>
                <Route path="/signin-signup" component={SignIn}/>
                <Route path="/create-projects" component={CreateProjects} />
                <Route path="/signed-in" exact component={PostHeader}/>
                <Route exact path="/" component={PreHome}/>
            </div>
        );
    }
}

export default Header;

When I click to the links it just shows blank pages.

Answer 1

Just use Switch component to wrap your Route's components in Header Component. Use Routes with exact props in top.

<Switch>
   <Route exact path="/" component={PreHome}/>
   <Route exact path="/signed-in"  component={PostHeader}/> 
   <Route path="/home" component={Home}/>
   <Route path="/signin-signup" component={SignIn}/>
   <Route path="/create-projects" component={CreateProjects} />        
<Switch>

You can also use render props in Route component. It is similar to component props but is useful for inline rendering and passing extra props to the element.

<Switch>
    <Route exact path="/" render={() => <PreHome />} />
    <Route exact  path="/signed-in" render={() => <PostHeader />}/>  
    <Route path="/home" render={() => <Home />} />
    <Route path="/signin-signup" render={() => <SignIn />} />
    <Route path="/create-projects" render={() => <CreateProjects />} />       
<Switch>

Note: This works fine for react router v4 so please check your version

Answer 2

Try to map the route something like below:

    ReactDOM.render((
      <Router>
        <Route path="/" component={Header}>
           <Route path="/home" component={Home}/>
           <Route path="/signin-signup" component={SignIn}/>
           <Route path="/create-projects" component={CreateProjects} />
           <Route path="/signed-in" exact component={PostHeader}/>
           <Route exact path="/" component={PreHome}/>
        </Route>
      </Router>
    ), document.getElementById('root'))

class Header extends Component{
    render(){
        return(
            <div className="container">
                <div>
                    <h3>The Web App</h3>
                        <nav>
                            <ul>
                                <li><Link to="/signin-signup">Sign in?</Link></li>
                                <li><Link to="/home">Home</Link></li>
                                <li><Link to="/create-projects">Create</Link></li>
                                <li><Link to="/signed-in">Signed in</Link></li>
                            </ul>
                        </nav>
                    <hr />
                </div>
                {this.props.children}
            </div>
        );
    }
}

Here is the working demo for your reference.

Hope it helps :)

Answer 3

Wrap your Routes in Switch. And when you wrap Route in Switch then write <Route exact path="/" component={PreHome}/> your last Route first. May b it'll help you.