Question

由于某种原因，我的三个组成部分Videos，Contact和Stats都不会呈现。只有我的导航栏渲染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;

Answer 1

我在想也许是因为您用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>

Answer 2

在这里您可以执行的操作。...设置一个BaseLayout组件，该组件接收Header然后呈现子组件。这样...

import React from "react";
import Header from "../shared/Header";

const BaseLayout = props => {
  return (
     <div className="layout-container">
      <Header />
     <div className="wrapper">{props.children}</div>
     </div>
   );
  };

  export default BaseLayout;

现在您可以使用BaseLayout组件包装这些组件。

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

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

2 个答案: