如何 link React 和新页面中的 2 个组件仍然有导航栏

Question

我已经为 React 建立了一个网站。我的代码在这里 https://codesandbox.io/s/3d-tool-zjm5m?file=/src/components/modeling.jsx。我想要的是当用户点击建模选项卡中的“上传”按钮时，它将 link 到 upload.jsx 的新页面，并且仍然有导航栏。

App.js代码：

import React, { Component } from 'react'
import Navigation from './components/navigation';
import Header from './components/header';
import About from './components/about';
import Modeling from './components/modeling';
import Resources from './components/resources';
import Team from './components/Team';
import JsonData from './data/data.json';

export class App extends Component {
  state = {
    landingPageData: {},
  }
  getlandingPageData() {
    this.setState({landingPageData : JsonData})
  }

  componentDidMount() {
    this.getlandingPageData();
  }

  render() {
    return (
      <div>
        <Navigation />
        <Header data={this.state.landingPageData.Header} />
        <About data={this.state.landingPageData.About} />
        <Modeling data={this.state.landingPageData.Modeling} />
        <Resources data={this.state.landingPageData.Resources} /> 
        <Team data={this.state.landingPageData.Team} />
    
      </div>
    )
  }
}

export default App;

Modeling.jsx代码：

import React, { Component } from "react";
import Upload from "./upload";

export class Modeling extends Component {
  uploadButton = (event) => {
    event.preventDefault();
    this.props.history.push({
      pathname: "/upload"
    });
  };
  render() {
    return (
      <div id="modeling">
        <div className="container">
          <div className="row">
            <div className="about-text">
              <h2>3D MODELING</h2>
            </div>
          </div>
          <div className=" wow fadeInUp slow">
            <div className="row pt-5 justify-content-center">
              <div className="col text-center">
                <h1>
                  <b>Pick what's right for you </b>
                </h1>
              </div>
            </div>
          </div>
          <div class="row p-5 p-md-0 pt-md-5 justify-content-around">
            <div
              class="col-md-5 mb-4 m-md-0 ml-md-5 modern-card card card-body shadow text-center wow fadeIn slow"
              data-wow-delay="0.2s"
            >
              <h2 class="mb-3 blue">
                <b>A 3D model from a 2D image.</b>
              </h2>

              <button
                type="button"
                class="btn btn-primary go-button"
                onclick={this.uploadButton}
              >
                Go upload
              </button>
            </div>

            <div
              class="col-md-5 mr-md-5 modern-card card card-body shadow text-center wow fadeIn slow"
              data-wow-delay="0.4s"
            >
              <h2 class="mb-3 blue">
                <b>A virtual tour from a 3D model.</b>
              </h2>

              <button
                type="button"
                class="btn btn-primary go-button"
                
              >
                Go!
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Modeling;

Can someone stop by give me any suggestions? I have really appreciated it. Thanks!

Answer 1

您的导航栏包含指向相当于“主页”部分的哈希链接。当您引入应用程序导航并想要多个页面时，您应该使用 Link 组件而不是锚标记。您还需要将 Navigation 组件放在路由上，以便它可以访问 Router 上下文。

App.js

由于您已经将整个应用包装在 Router 中，因此您只需将 Navigation 和“主页”组件放在 Route 中秒。将“主页”组件呈现为匿名组件，并记住将路由道具传递给每个组件。

<div>
  <Route component={Navigation} />
  <Switch>
    <Route path="/upload" component={Upload} />
    <Route
      render={(routeProps) => (
        <>
          <Header {...routeProps} data={this.state.landingPageData.Header} />
          <About {...routeProps} data={this.state.landingPageData.About} />
          <Modeling {...routeProps} data={this.state.landingPageData.Modeling} />
          <Resources {...routeProps} data={this.state.landingPageData.Resources} />
          <Team {...routeProps} data={this.state.landingPageData.Team} />
        </>
      )}
    />
  </Switch>
</div>

Navigation.jsx

为了保持 hashlink 功能正常工作，您还需要从其他页面导入一个 HashLink 组件。

import { HashLink } from "react-router-hash-link";

并将所有锚标签更改为 HashLink 个组件。

<HashLink className="navbar-brand page-scroll" to="/#page-top">
  3D RECONSTRUCTION TOOL
</HashLink>{" "}

...

<HashLink to="/#page-top" className="page-scroll">
  Home
</HashLink>
// ...etc...

Modeling.jsx

修复按钮的 onClick 属性，它是 onClick 而不是 onclick。由于路由道具是从 App.js 传入的，因此 history 道具现在可用于命令式导航。

uploadButton = (event) => {
  event.preventDefault();
  this.props.history.push({
    pathname: "/upload"
  });
};

...

<button
  type="button"
  className="btn btn-primary go-button"
  onClick={this.uploadButton}
>
  Go upload
</button>

现在您可能会注意到，当导航到“/upload”上的新页面时，导航 header 仍然固定在 window 的顶部，页面呈现在下方。这是从 react-bootstrap 开始应用的样式。要解决此问题，您可以将 padding-top 添加到 body 以将内容下推到 header.

body {
  padding-top: /* whatever the navigation header height is */;
}

您的 header 是动态的，具体取决于视图宽度，因此您可能需要检查视图宽度并在 JS 中进行设置。这是一个有前途的解决方案：https://whosebug.com/a/38105035/8690857

如何 link React 和新页面中的 2 个组件仍然有导航栏

How to link 2 components in React and in a new page still have a navigation bar

javascript

navigation

components

reactjs

App.js

Navigation.jsx

Modeling.jsx