最初の実行時に2つのコンポーネントをレンダリングする

Question

私は、メイン、ナビ、タイマー、カウントダウンの4つのコンポーネントで小さな反応アプリを開発しています。私はそれを実行すると（新しいタブを開き、アプリケーションを読み込み、リフレッシュしないで）、このアプリケーションでメインコンポーネントとタイマーコンポーネントを同時にレンダリングするようにしますが、アプリケーションはメインコンポーネントのみをレンダリングし、Navコンポーネントのみを含む空白ページが表示されます。

私はIndexRouteを使ってみましたが、私は奇妙なエラーがあり、それは私のためには機能しませんでした。

import React, {Component} from 'react'; 
import {NavLink} from 'react-router-dom'; 

class Nav extends Component { 

    render() { 
     return (
      <div className="top-bar"> 
       <div className="top-bar-left"> 
        <ul className="menu"> 
         <li className="menu-text">React Timer</li> 
         <li><NavLink to="/timer" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Timer</NavLink></li> 
         <li><NavLink to="/countdown" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Countdown</NavLink></li> 
        </ul> 
       </div> 
       <div className="top-bar-right"> 
        <ul className="menu"> 
         <li className="menu-text">Created by Milad Fattahi</li> 
        </ul> 
       </div> 
      </div> 
     ); 
    } 

} 

export default Nav; 

、他の2つのコンポーネントは、単純なテキスト要素が含まれています。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom'; 
import Main from 'Main'; 
import Timer from 'Timer'; 
import Countdown from 'Countdown'; 

ReactDOM.render(
    <Router history={hashHistory}> 
     <div> 
      <Route path="/" component={Main} /> 
      <Route exact path="/timer" component={Timer} /> 
      <Route path="/countdown" component={Countdown} /> 
     </div> 
    </Router>, 
    document.getElementById('app') 
); 

メインコンポーネント：

import React, {Component} from 'react'; 
import Nav from 'Nav'; 

class Main extends Component { 

    render() { 
     return (
      <Nav /> 
     ); 
    } 
} 

export default Main; 

ナビゲーションコンポーネント

は、ここに私のコードです。

Answer 1

IndexRouteおよびhashHistoryはreact-router-domで利用できません。 Switchを使用して、最初に一致するルートのみをレンダリングします。これで、コンポーネント自体に子ルートを持つことができます。あなたは、Switchを使うそうでない場合は、最後のpath="/"でルートを持っているとき

はまた、それは初めでそれを一致し、あなたが主なコンポーネントの子であるためにあなたの時間コンポーネントを構成することができ、あなたの他のルート

をレンダリングしません。以下のような主要コンポーネントで次に

import {BrowserRouter as Router, Route} from 'react-router-dom'; 
ReactDOM.render(
    <Router> 
     <Switch> 
      <Route path="/" component={Main} /> 
     </Switch> 
    </Router>, 
    document.getElementById('app') 
); 

import React, {Component} from 'react'; 
import Nav from 'Nav'; 
import {Route, Redirect} from 'react-router-dom' 
class Main extends Component { 

    render() { 
     return (
      <div> 
      <Nav /> 
      <Redirect to="/timer" /> 
      <Route exact path="/timer" component={Timer} /> 
      <Route path="/countdown" component={Countdown} /> 
      </div> 
     ); 
    } 
} 

export default Main;