时间戳

首页 > 解决方案 > 只有我的导航栏在渲染，而不是我的页面组件

reactjs - 只有我的导航栏在渲染，而不是我的页面组件

问题描述

出于某种原因，我的三个组件 、Videos和ContactallStats都不会渲染。只有我的导航栏渲染，Header. 我的三个组件没有隐藏在我的导航栏下面。他们根本不渲染。

我检查了路径是否匹配，并恢复到它们 DID 渲染的早期阶段代码。但是由于某种原因，我的组件现在都拒绝渲染。

这是我正在调用的路由index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Contact from "./components/ContactUs";
import Header from "./components/Header";
import Stats from "./components/Stats";
import Videos from "./components/Videos";
import Login from "./components/Login";
import Progress from "./components/Progress";

const routing = (
  <div>
    <Router>
      <Switch>
        <Route path="/" exact component={Login} />
        <Route
          path="/landingpage/videos"
          exact
          render={props => (
            <div>
              <Header />
              <Videos />
            </div>
          )}
        />
        <Route
          path="/landingpage/contact"
          exact
          render={props => (
            <div>
              <Header />
              <Contact />
            </div>
          )}
        />
        <Route
          path="/landingpage/stats/"
          exact
          render={props => (
            <div>
              <Header />
              <Stats />
            </div>
          )}
        />
        <Route
          path="/landingpage/progress"
          exact
          render={props => (
            <div>
              <Header />
              <Progress />
            </div>
          )}
        />
      </Switch>
    </Router>
  </div>
);

ReactDOM.render(routing, document.getElementById("root"));

标头代码：

import React, { Component } from "react";
import Header from "./Header.jsx";
import logo from "../photos/logo.png";

// Everything that is common for the dashboard UI goes here
import React, { Component } from "react";
import Header from "./Header.jsx";
import logo from "../photos/logo.png";

// Everything that is common for the dashboard UI goes here
class App extends Component {
  render() {
    return (
      <div>
        <Header logo={logo}>{props.children}</Header>
      </div>
    );
  }
}

export default App;

标签： reactjs

解决方案

我在想可能是因为你用 Header 包装它。 

const routing = (
<div>
  <Router>
    <Switch>
      <Route path="/" exact component={Login} />
      <Route
        path="/landingpage/videos"
        exact
        render={props => (
          <div>
              <Header/>
                <Videos />
          </div>

        )}
      />
      <Route
        path="/landingpage/contact"
        exact
        render={props => (
          <div>
              <Header/>
                <Contact />
          </div>

        )}
      />
      <Route
        path="/landingpage/stats/"
        exact
        render={props => (
         <div>
              <Header/>
                <Stats />

         </div>
        )}
      />
    </Switch>
  </Router>
</div>

推荐阅读