Cannot read property 'history' of undefined — react-router v4 & create-react-app

Question

I could not use Link to navigate, here's my code

Folders structure

components
----App.js
----home
    ----Home
index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import App from './components/App';

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

App.js

import React, { Component } from 'react';

import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import Home from './home/Home';

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Link to="/home">home</Link>
        <Router>
              <Route
                path={'/home'}
                exact={true}
                component={Home}
              />
        </Router>
      </div>
    );
  }
}

export default App;

Home.js

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div className="Home">
        Home Page
      </div>
    );
  }
}

export default Home;

it seems to be ok without Link except that when i enter directly localhost:3000/home to url address bar, home component still doesn't appear. i have tried some way to update/re-install react-router but nothing changed.

Answer 1

Your Link component need to be present within the Router component. You can restructure your code like

class App extends Component {
  render() {
    return (
      <Router>
      <div className="App">
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Link to="/home">home</Link>
        <Route
                path={'/home'}
                exact={true}
                component={Home}
              />

      </div>
      </Router>
    );
  }
}