ReactアプリケーションにHTMLページを追加するには

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を移動します。

次に、2番目のページを指す最初のページにアンカータグを追加し、そこにユーザーをルーティングします。