Reactを使用してマルチページアプリケーションを作成するにはどうすればよいですか？

Question

私はReactを使い始めたばかりで、create-react-appを使って新しいプロジェクトを作成しました。私は働くホームページを作った。しかし、私はこのアプリケーションに別のページを追加したいと思います。クリックしたときに別のページにリダイレクトしたいホームページにボタンがあります。誰かがこれを行うには簡単な説明を教えてくださいできますか？

これに尋ねる他の質問がありますが、create-react-appには当てはまらないか、またはReactで始めているので理解できません。あなたが反応し、ルータ-DOMをライブラリを使用する必要が

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Route, BrowserRouter as Router } from 'react-router-dom'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render((
    <Router> 
     <Route path = "/" component = {App} /> 
    </Router> 
), document.getElementById('root')); 
registerServiceWorker(); 

Answer 1

：

は、ここに私のindex.jsです。ページ間のナビゲーションは本当に反応が簡単です。

import React, { Component } from 'react'; 
import { Switch, Route, BrowserRouter, hashHistory } from 'react-router-dom'; 
import './MainLayout.css'; 
import ReportNavComponent from './ReportNavComponent'; 
import ListOfUsers from '../reports/ListOfUsers/ListOfUsers'; 
import ListOfProviders from '../reports/ListOfProviders/ListOfProviders'; 
import ListOfDiagnosis from '../reports/ListOfDiagnosis/ListOfDiagnosis'; 
import ListOfNewPatients from '../reports/ListOfNewPatients/ListOfNewPatients'; 
import NumberOfAdmissions from '../reports/NumberOfAdmissions/NumberOfAdmissions'; 

... 

<div className="reportContent"> 
         <Switch> 
          <Route path="/ListOfUsers" component={ListOfUsers} /> 
          <Route path="/ListOfProviders" component={ListOfProviders} /> 
          <Route path="/ListOfDiagnosis" component={ListOfDiagnosis} /> 
          <Route path="/ListOfNewPatients" component={ListOfNewPatients} /> 
          <Route path="/NumberOfAdmissions" component={NumberOfAdmissions} /> 
          <Route component={ListOfUsers} /> 
         </Switch> 
</div> 

Answer 2

reacter-router-domは、ルーティングについて移動する方法です：

import React from 'react'; 
import {render} from 'react-dom'; 
import {Router, Route, hashHistory, BrowserRouter} from 'react-router-dom' 

render((
     <BrowserRouter basename="/" history={hashHistory}> 
      {routes()} 
     </BrowserRouter> 
     ), document.getElementById('app')); 

は、その後、あなたのホームページには、ページ下のに似た何かを持つことができます。しかし、ちょうど反応を開始したばかりの方は、ボイラープレートプロジェクトから始め、コンポーネントや他のエンティティがどのように相互作用するのかを見てみましょう。

間違いなくdavezuko's react-redux starter kitを見て、それを試してみてください。