ReactJS Uncaught ReferenceError: Link is not defined

Question

I am relatively new to react and programming in general and a problem has appeared that I have been trying to solve for sometime now but can not seem to find a solution for. The problem I have is that whenever I press the link 'login' (That can be found in the second last code snippet) I get the error,

Uncaught ReferenceError: Link is not defined
at Object.render (bundle.js:37775)
at bundle.js:33451
at measureLifeCyclePerf (bundle.js:32731)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:33450)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:33477)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:33017)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:32913)
at Object.mountComponent (bundle.js:4990)
at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:33420)
at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:33379)        

and I believe it has something to do with the link itself or the router. When I press the link it changes the path to "/login" but it does not change the page. I followed this tutorial (https://www.youtube.com/watch?v=W6m2qUCYLuk) and in it he used Router instead of BrowserRouter but I encountered some errors and read here that you should now use BrowserRouter instead. So do I have to make any changes just because I use BrowserRouter instead of Router?

The code for the router:

var React = require('react');
var ReactDOM = require('react-dom');

require('./css/index.css');

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

var Login = require('./login');
var CreateNewAcc = require('./createNewAcc');

var App = React.createClass({
    render: function(){
        return(
            <BrowserRouter history={browserHistory}>
                <div>
                    <Route path={'/'} component={MainComponent}/>
                    <Route path={'/login'} component={Login}/>
                    <Route path={'/createNewAcc'} component=
{CreateNewAcc}/>
                </div>
            </BrowserRouter>
        );
    }
});

And this is the main code (I have shortened it and only added the relevant part where the link is):

var MainComponent = React.createClass({
render: function(){
    return(
        <div className='wrapper'>
            <div className='header'>
                <img className='logo' src='./images/loop.png'></img>
                <div className='loginDiv'>
                    <Link className='login' to={'/login'}>Logga in</Link>
                </div>
            </div>

Package.json file

"dependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-router": "^4.2.0",
  "react-router-dom": "^4.2.2"
},
"devDependencies": {
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "css-loader": "^0.28.4",
  "style-loader": "^0.18.2",
  "webpack": "^3.5.4",
  "webpack-dev-server": "^2.7.1"
}

Thanks in advance!

Answer 1

Inside your MainComponent <Link> remove {} so inside MainComponent :

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

 <Link className='login' to="/login">Logga in</Link>

You can read more on Link