Routes not rendering with react-router-dom

Question

My site's entering scenario is

/ -> /home
     -> /about
     -> /project

When connect to site.com/, there is welcome message and enter button.

After click the 'enter' button, /home will be show.

And /home has Navbar that has two components /about and /project

So, user can click the navbar menu to navigate another page.

/about is works properly, but /project doesn't work. It displayed blank page.

[App.js]

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';
import Project from './components/Project';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path="/" component={Login} />
          <Route path="/home" component={Home} />
        </div>
      </Router>
    );
  }
}

export default App;

[Home.js]

import React, { Component } from 'react';
import Header from '../Header';
import Project from '../Project';
import About from '../About';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route } from 'react-router-dom'
import {
    Navbar,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink } from 'reactstrap';

class index extends Component {
    render() {
        return (
            <BrowserRouter>
                <div className="home">
                    <Header />
                    <Route path="/home" component={About}/>
                    <Route path="/project" component={Project}/>
                </div>
            </BrowserRouter>
        );
    }
}

export default index;

[Header.js]

import React, { Component } from 'react';
import {
  Navbar,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink } from 'reactstrap';

class index extends Component {
    render() {
        return (
            <div className="navbar_fixed">
            <Navbar color="light" light expand="md">
              <NavbarBrand href="/">Hide</NavbarBrand>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <NavLink href="/home">About</NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink href="/project">Project</NavLink>
                  </NavItem>
                </Nav>
            </Navbar>
          </div>
        );
    }
}

export default index;

[About.js]

import React, { Component } from 'react';
import './index.css';

export default class index extends Component {
  render() {
    return (
      <div>
         Some codes for About.js
      </div>
    );
  }
}

[Project.js]

import React, { Component } from 'react';
import './index.css';

export default class index extends Component {
  render() {
    return (
      <div>
       Some codes for Project.js
      </div>
    );
  }
}

When I entered to /home, It shows About.js component with navbar.

But entered to /project, It show nothing.

I can't find where is the error.

How can I fixed it?

Thanks.

[SOLVED]

Change the code to Shubham Khatri's code and add exact to <Route exact path="/home" component={About}/>

Shubham Khatri · Accepted Answer · 2018-05-14T08:56:31.103

1

Your Header component isn't receiving the react-router props and hence its navigation doesn't work properly, You could write Header as a default Route. Also you need to use BrowserRouter only once at the top of your App

Also with nested Route, you need to specify the relative routes

class index extends Component {
    render() {
        const { match } = this.props;
        return (
                <div className="home">
                    <Route component={Header} />
                    <Switch>
                        <Route path={`${match.path}/project`} component={Project}/>
                        <Route path="/home" component={About}/>
                    </Switch>
                </div>
        );
    }
}

and your Header.js will be

import React, { Component } from 'react';
import {
  Navbar,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink } from 'reactstrap';

class index extends Component {
    render() {
        const { match } = this.props;
        return (
            <div className="navbar_fixed">
            <Navbar color="light" light expand="md">
              <NavbarBrand href="/">Hide</NavbarBrand>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <NavLink href="/home">About</NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink href={`${match.url}/project`}>Project</NavLink>
                  </NavItem>
                </Nav>
            </Navbar>
          </div>
        );
    }
}

export default index;

edited May 14 '18 at 08:56

answered May 14 '18 at 08:27

Shubham Khatri

211,155
45
305
318

I fixed Home.js code to your code. But /project still shows nothing. – Hide May 14 '18 at 08:30
You mean delete the ? After delete it, still show nothing. – Hide May 14 '18 at 08:44
Updated the answer again, you need to specify relative routes while navigating since,Home contains `/project` and Home is defined at `/home` and hence /project must be `/home/project` – Shubham Khatri May 14 '18 at 08:50
Thanks. But after modifed code, another errors has occured. When I entered to /home/project, Abous.js and Project.js shows together at one page. (/home is works perfectly) – Hide May 14 '18 at 08:55
I added `exact` to path, then it works. Thanks for comment! – Hide May 14 '18 at 08:56
Updated the answer for that too. check this https://stackoverflow.com/questions/43994510/react-router-v4-renders-multiple-routes/43994605#43994605 – Shubham Khatri May 14 '18 at 08:56

Routes not rendering with react-router-dom

1 Answers1

Linked