如何將HTML頁面添加到React應用程序

Question

我使用最新版本的React.js創建了簡單的應用程序。 我的App.js文件看起來像：

import React, { Component } from 'react'; 
import './App.css'; 
import "../node_modules/bootswatch/superhero/bootstrap.css"; 
import { Navbar, NavItem, Nav, Grid, Row, Col } from "react-bootstrap"; 
import HTMLDocument from '../node_modules/react-html-document'; 
import ReactDOMServer from '../node_modules/react-dom/server'; 

const PLACES = [ 
    { name: "Almaty", zip:"94303" }, 
    { name: "Karaganda", zip:"77777" }, 
    { name: "Astana", zip:"76423" }, 
    { name: "Oskemen", zip:"63452" } 
]; 


class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     activePlace: 0, 
    }; 
} 
    render() { 
     const activePlace = this.state.activePlace; 
    return (
     <div> 
      <Navbar> 
       <Navbar.Header> 
        <Navbar.Brand> 
       Android Application Development 
        </Navbar.Brand> 
       </Navbar.Header> 
      </Navbar> 
     <Grid> 
      <Row> 
       <Col md={4} sm={4}> 
        <h3>Select a city</h3> 
        <Nav 
         bsStyle="pills" 
         stacked 
         activeKey={activePlace} 
         onSelect={index => { 
          this.setState({ activePlace: index }); 
     }} 
    > 
     {PLACES.map((place, index) => (
      <NavItem key={index} eventKey={index}>{place.name}</NavItem> 
     ))} 
     </Nav> 
    </Col> 
    <Col md={8} sm={8}> 
     <WeatherDisplay key={activePlace} zip={PLACES[activePlace].zip} /> 
    </Col> 
</Row> 
</Grid> 
</div> 
    ); 
    } 
} 


class WeatherDisplay extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      weatherData: null 
     }; 
    } 
    componentDidMount() { 
     const zip = this.props.zip; 
     const URL = "http://api.openweathermap.org/data/2.5/weather?q=" + 
       zip + "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial"; 
     fetch(URL).then(res => res.json()).then(json => { 
      this.setState({ weatherData: json}); 
     }); 
    } 
    render() { 
     const weatherData = this.state.weatherData; 
     if (!weatherData) return <div>Loading</div>; 
     const weather = weatherData.weather[0]; 
     const iconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png"; 
return ( 
    <div> 
    <h1> 
     {weather.main} in {weatherData.name} 
     <img src={iconUrl} alt={weatherData.description} /> 
    </h1> 
    <p>Current: {weatherData.main.temp}°</p> 
    <p>High: {weatherData.main.temp_max}°</p> 
    <p>Low: {weatherData.main.temp_min}°</p> 
    <p>Wind Speed: {weatherData.wind.speed} mi/hr</p> 
    </div> 
); 
    } 
} 

export default App; 

一切都很好！但是現在我發現了一個非常棒的主頁（僅HTML + CSS）。我想首先添加主頁（主頁包含主菜單），然後如果我點擊任何按鈕，我可以去我的App.js文件。 我該如何執行該操作？

對不起，我在JavaScript和React.js

只是新

Answer 1

使主頁您的用戶所看到的第一件事。然後製作一個帶有div的新頁面，並將您的反應應用程序應用於該div。你需要做的就是製作一個新的頁面，並在頁面上顯示反應。

製作一個新的HTML頁面。當你的用戶訪問你的網站時，首先渲染新的HTML頁面，就像你現在正在渲染反應頁面一樣。然後創建一個新頁面，並將您正在呈現的反應的div移至現在的新頁面。

然後在第一頁上添加一個錨點標記，指向第二個頁面並將用戶路由到那裏。