在 react-router v4 的嵌套路由中看到空白页

Posted 2023-02-22

【中文标题】在 react-router v4 的嵌套路由中看到空白页

【英文标题】：Seeing blank page in nested routes in react-router v4

【发布时间】：2019-05-31 11:54:09

【问题描述】：

我是新来的反应，还在学习。 我正在尝试在我的反应项目中添加嵌套路由，以便 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”时，我看到的是一个空白页面，而不是带有cafe preview html 的标题。

我尝试了这个 *** 线程 Multiple Nested Routes in react-router-dom v4 中提到的一些选项，但没有一个起作用。

我希望我已经清楚地解释了我的问题。

【问题讨论】：

“/protected/cafepreview”路线在哪里？

【参考方案1】：

检查文档https://reacttraining.com/react-router/web/api/Route/exact-bool。从 App 组件中的路由中删除exact，它将开始工作。

【参考方案2】：

因为您在app.js 文件中设置了exact。从特定路线中删除它。它会工作的