I am new to react and still learning. I am trying to add nested routes in my react project, so that a content of div changes based on the route.

Following are my ponents :-

//index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

library.add(faIgloo);

ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();


// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './ponents/login/login.js'
import Protected from './ponents/protected/protected.js'



import './App.css';

class App extends Component {

  render() {
    return (
        <Switch>
          <Route exact path="/protected" ponent={Protected}/>
          <Route path="/login" ponent={Login}/>
        </Switch>
    );
  }
}

export default App;



//protected.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './header/header.js';
import './protected.css';

import CafePreview from './cafepreview/cafepreview.js'

class Protected extends Component {
  render() {
    const {match} = this.props;
    return (
        <div>
          <Header></Header>
          {/*<Preview/>*/}
          <Switch>
           <Route path='/protected/cafepreview' ponent={CafePreview}/>
          </Switch>
        </div>
    );
  }
}

export default Protected

// cafepreview.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './preview.css';

console.log("here");
class CafePreview extends Component {
  render() {
    return (
        <div>
           <div>
             <i class="fa fas fa-arrow-left"></i>
             <span> BACK TO ALL CAFES </span>
           </div>
        </div>
    );
  }
}

export default CafePreview

When i open '/protected' i can see the header ing, but when i try to open '/protected/cafepreview' i see an empty page instead of header with cafe preview html.

I tried some options mentioned in this stackoverflow thread Multiple Nested Routes in react-router-dom v4 but none of them worked.

I hope i have explained my problem clearly.

I am new to react and still learning. I am trying to add nested routes in my react project, so that a content of div changes based on the route.

Following are my ponents :-

//index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

library.add(faIgloo);

ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();


// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './ponents/login/login.js'
import Protected from './ponents/protected/protected.js'



import './App.css';

class App extends Component {

  render() {
    return (
        <Switch>
          <Route exact path="/protected" ponent={Protected}/>
          <Route path="/login" ponent={Login}/>
        </Switch>
    );
  }
}

export default App;



//protected.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './header/header.js';
import './protected.css';

import CafePreview from './cafepreview/cafepreview.js'

class Protected extends Component {
  render() {
    const {match} = this.props;
    return (
        <div>
          <Header></Header>
          {/*<Preview/>*/}
          <Switch>
           <Route path='/protected/cafepreview' ponent={CafePreview}/>
          </Switch>
        </div>
    );
  }
}

export default Protected

// cafepreview.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './preview.css';

console.log("here");
class CafePreview extends Component {
  render() {
    return (
        <div>
           <div>
             <i class="fa fas fa-arrow-left"></i>
             <span> BACK TO ALL CAFES </span>
           </div>
        </div>
    );
  }
}

export default CafePreview

When i open '/protected' i can see the header ing, but when i try to open '/protected/cafepreview' i see an empty page instead of header with cafe preview html.

I tried some options mentioned in this stackoverflow thread Multiple Nested Routes in react-router-dom v4 but none of them worked.

I hope i have explained my problem clearly.

• javascript
• reactjs
• react-router-v4
• react-router-dom

• And where is the '/protected/cafepreview' route? – SakoBu Commented Jan 4, 2019 at 22:57

2 Answers 2

Check documentation https://reacttraining./react-router/web/api/Route/exact-bool. Remove exact from the route in the App ponent and it will start working.

its because you have set exact in the app.js file. Remove it from the particular route. It'll work