react router

App.js

import React, { PureComponent } from 'react';
import './App.css';

import Header from './components/Header';
import Main from './components/Main';

class App extends PureComponent {

  render() {
    return (
      <div className="App">
          <Header/>
          <Main/>
      </div>
      
    );
  }
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import './index.css';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>  
    <App/>
  </BrowserRouter>
  ,
  document.getElementById('root')
);

main.js

import React from 'react'
import { Switch, Route } from 'react-router'

import PlanetsDetailContainer from '../planets/components/PlanetsDetailContainer'
import ListPlanetsContainer from '../planets/components/ListPlanetsContainer';

// The Main component renders one of the three provided
// Routes (provided that one matches). Both the /roster
// and /schedule routes will match any pathname that starts
// with /roster or /schedule. The / route will only match
// when the pathname is exactly the string "/"
const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={ ListPlanetsContainer }/>
      <Route path='/planets/:id' component={ PlanetsDetailContainer }/> 
    </Switch>
  </main>
)

export default Main;

planet.js

import React from 'react';
import { Link } from 'react-router-dom';

const Planet = ( { planet, history }) => {
    
    const {name, population} = planet;

    return (
        <Link to={`planet/${planet.id}` }>
            <div className="planet">
                <h2> { name }</h2>
                <label> { population } habitans </label>
            </div>
        </Link>
        
        
    );
}

export default Planet;