3

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.

  • This is Typescript. Are you using .dts definition files for react router? – mohd tahir Jun 25 '18 at 9:09
  • Forgot to mention TypeScript. I'll update my question. I don't think I'm using a definition file for React Router. I'm not getting any errors on my editor. When I run the app, there are no errors in the console window. There are warnings but seems unrelated. Do I need this? If yes, how do I add it? Thanks. – joec608 Jun 25 '18 at 15:19
0

Execute the following command:

npm install --save @types/react-router

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

  • I installed @type/react-router and run the application. No errors in the terminal and no errors in the console. The Web Part shows a blank screen. Anything else I should try? – joec608 Jun 27 '18 at 6:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.