如何在 React 和新页面中链接 2 个组件仍然有导航栏

Question

I have built a website to React. My code is here https://codesandbox.io/s/3d-tool-zjm5m?file=/src/components/modeling.jsx . What I want is when the user clicks on the button "Go upload" in Modeling tab, it will link to a new page of upload.jsx with still have the navigation bar.

App.js code:

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 code:

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

Your navigation bar has hashlinks to sections on what amounts to a "homepage". When you introduce app navigation and want more than a single page then you should use Link components versus anchor tags. You also need to place the Navigation component on a route so it has access to the Router context.

App.js

Since you already wrap the entire app in a Router you need only place the Navigation and "homepage" components in Route s. Render the "homepage" components into an anonymous component and remember to pass the route props through to each component.

<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

In order to keep the hashlink functionality working, and from other pages you will need to also import a HashLink component.

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

And change all the anchor tags to HashLink components.

<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

Fix the button's onClick prop, it is onClick not onclick . Because route props were passed in from App.js , the history prop is now available for the imperative navigation.

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>

Now you may notice when navigating to the new page on "/upload" that the navigation header is still fixed to the top of the window and the page is rendered underneath. This is style being applied from react-bootstrap . To resolve this you can add padding-top to the body to push content down under the header.

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

Your header is dynamic though, depending on view width, so you will likely need to check the view width and set this in JS. Here's a promising solution: https://stackoverflow.com/a/38105035/8690857