SPFX and react-router

Question

I'm having trouble getting react-router working on my SharePoint Web Part with React and TypeScript. I have tried react-router as a standalone webapp and it works fine. Just can't get it working on SharePoint. When I run my Web Part in my local machine with react-router, I get a blank screen and no errors. I searched for answers all over and can't find anything that works. Below is a HelloWorld Web Part example where I have put in 'Router' and 'Route' tags to see if it would work. When I run this, it shows a blank screen.

import * as React from 'react';
import { IHelloWorldProps } from './IHelloWorldProps';
import { BrowserRouter as Router, Route, Link, hashHistory  } from "react-router-dom";

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
      <div>
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
            </ul>
          </div>
          <Route path="/" component={HelloWorld}/>
        </Router>
      </div>

    );
  }
}

If anyone could help or point me in the right direction in terms of documentation, I would be greatly appreciated. Thanks in advance.

Answer 1

Execute the following command:

npm install --save @types/react-router

Then, if you see any errors try fixing them. Then re run the application.

Answer 2

You should create a new component to use in that route, instead of using the same HelloWorld component inside the HelloWorld component.