javascript - Seeing blank page in nested routes in react-router v4 - Stack Overflow

admin管理员组

文章数量:1352152

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

Share Improve this question Follow asked Jan 4, 2019 at 22:18 Anshul SrivastavaAnshul Srivastava 24922 gold badges55 silver badges1111 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

本文标签： javascriptSeeing blank page in nested routes in reactrouter v4Stack Overflow