Application multi-pages React Router v4

Question

Je suis très nouveau dans React JS et j'essaie de créer une application multi-pages avec. J'ai écrit le code suivant pour y parvenir:

routes.js

import React from 'react'; 
import { Route } from 'react-router-dom'; 
import App from './App'; 
import {FirstPage} from './Components/FirstPage'; 

export default (
    <Route excat path="/" component={App}> 
     <Route path="/some/firstpage" component={FirstPage} /> 
    </Route> 
); 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Router} from 'react-router-dom'; 
import {HashRouter as history} from 'react-router-dom'; 
//import 'semantic-ui-css/semantic.min.css'; 
import './index.css'; 
import App from './App'; 
import routes from './routes.js'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
    <Router routes ={routes} history={history} />, 
    <App />, document.getElementById('root')); 
registerServiceWorker(); 

FirstPage.js

import React, { Component } from 'react'; 


export class FirstPage extends Component { 
    render() { 
     return (
      <div className="App"> 
       <header className="App-header"> 
        <h1 className="App-title">Welcome to FirstPage</h1> 
       </header> 
       <p className="App-intro"> 
       </p> 
      </div> 
     ); 
    } 
} 

app.js

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import { Link } from 'react-router-dom'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title">Welcome to React</h1> 
     </header> 
      <main> 
       {this.props.children} 
      </main> 

     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
      <Link to="/some/firstpage">Click me</Link> 
     </div> 
    ); 
    } 
} 

export default App; 

L'erreur que je reçois est la suivante:

conteneur cible est pas un élément DOM. Cela montre le code suivant dans index.js

./src/index.js 
C:/.../frontend/src/index.js:11 

    8 | import routes from './routes.js'; 
    9 | import registerServiceWorker from './registerServiceWorker'; 
    10 | 
> 11 | ReactDOM.render(
    12 |  <Router routes ={routes} history={history} />, 
    13 |  <App />, document.getElementById('root')); 
    14 | registerServiceWorker(); 

J'espère que quelqu'un peut me aider et me expliquer ce que je fais mal.

Answer 1

Vos arguments à ReactDOM.render() sont incorrects. Enroulez le composant App dans le composant du routeur:

ReactDOM.render(
    <Router routes ={routes} history={history} ><App /></Router>, document.getElementById('root') 
); 

Voir https://reactjs.org/docs/react-dom.html#render