Rendern von zwei Komponenten beim ersten Lauf

Question

Ich arbeite an einer kleinen React-App mit vier Komponenten: Main, Nav, Timer und Countdown. Wenn ich es ausführe (öffne einen neuen Tab und lade die App, nicht auffrischen), möchte ich, dass diese App Main- und Timer-Komponenten gleichzeitig rendert, aber die App rendert nur Main Component und ich sehe eine leere Seite mit nur Nav-Komponente gerendert wurde .

Ich habe versucht mit IndexRoute, aber ich habe einen seltsamen Fehler und es hat nicht funktioniert für mich.

Hier ist mein Code:

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') 
); 

Hauptbestandteil:

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

class Main extends Component { 

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

export default Main; 

Nav Komponente:

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; 

Die beiden anderen Komponenten nur mit einem einfachen Textelement enthalten.

Answer 1

IndexRoute und hashHistory sind in react-router-dom nicht verfügbar. Verwenden Sie Switch, um nur die erste übereinstimmende Route zu rendern. Sie können dann die untergeordneten Routen in der Komponente selbst haben.

Auch wenn Sie Switch verwenden, haben Sie die Route mit path="/" schließlich sonst wird es es am Anfang übereinstimmen und nicht machen Ihre anderen Routen

Sie können Ihre Zeit Komponente konfigurieren ein Kind der Hauptkomponente sein wie

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

Dann in Hauptkomponente

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;