Просмотр пустой страницы во вложенных маршрутах в response-router v4

Question

Я новичок, чтобы реагировать и все еще учусь. Я пытаюсь добавить вложенные маршруты в свой реактивный проект, чтобы содержимое div менялось в зависимости от маршрута.

Ниже приведены мои компоненты: -

//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 './components/login/login.js'
import Protected from './components/protected/protected.js'



import './App.css';

class App extends Component {

  render() {
    return (
        <Switch>
          <Route exact path="/protected" component={Protected}/>
          <Route path="/login" component={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' component={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

Когда я открываю '/ protected', я вижу приближающийся заголовок, но когда я пытаюсь открыть '/ protected / cafepreview', я вижу пустую страницу вместо заголовка с html предварительного просмотра кафе.

Я пробовал некоторые опции, упомянутые в этом потоке stackoverflow Несколько вложенных маршрутов в Reaction-router-dom v4 , но ни один из них не работал.

Надеюсь, я четко объяснил свою проблему.

Answer 1

Проверьте документацию https://reacttraining.com/react-router/web/api/Route/exact-bool. Удалите exact из маршрута в компоненте приложения, и он начнет работать.