SharePoint Framework WebPart中React Router路由及跳转问题咨询

Let's sort out that routing issue you're facing! The problem stems from a couple of common missteps when using React Router inside SharePoint Framework:

1. You can't use browserHistory directly in SPFx — it conflicts with SharePoint's own page routing, plus React Router v4+ has phased out direct access to browserHistory.
2. Your component tree isn't wrapped in a router that works within the SPFx context, and you haven't defined route mappings to tell the app which component to render when navigating.

Here's how to fix it:

Step 1: Update Your Component to Use Router Props #

Instead of browserHistory, use the history object injected via React Router's withRouter higher-order component. This works for class components:

import * as React from 'react';
import { withRouter, RouteComponentProps } from "react-router-dom";
import Title from './app';

// Merge your existing props with React Router's route props
interface ITestRouteProps extends RouteComponentProps {}

class TestRoute extends React.Component<ITestRouteProps, {}> {
  handleClick = () => {
    // Use the history object from props to navigate
    this.props.history.push('/Title');
  };

  public render(): React.ReactElement<ITestRouteProps> {
    return (
      <div>
        <h1>Simple SPA</h1>
        <button onClick={this.handleClick} type="button">
          Click me to go to the Title page
        </button>
      </div>
    );
  }
}

// Wrap your component with withRouter to inject routing props
export default withRouter(TestRoute);

If you prefer function components, use the useHistory hook for a cleaner approach:

import * as React from 'react';
import { useHistory } from "react-router-dom";
import Title from './app';

const TestRoute = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/Title');
  };

  return (
    <div>
      <h1>Simple SPA</h1>
      <button onClick={handleClick} type="button">
        Click me to go to the Title page
      </button>
    </div>
  );
};

export default TestRoute;

Step 2: Wrap Your App in a SPFx-Compatible Router #

SPFx doesn't play nice with BrowserRouter (it clashes with SharePoint's own URL structure). Use HashRouter (uses URL hashes for routing) or MemoryRouter (stores routing state in memory, no URL changes) instead. Configure your routes in your main WebPart component:

import * as React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import TestRoute from './TestRoute';
import Title from './app';

export default class YourWebPartComponent extends React.Component<IYourWebPartProps, {}> {
  public render(): React.ReactElement<IYourWebPartProps> {
    return (
      <HashRouter>
        <Switch>
          // Default route loads your TestRoute component
          <Route path="/" exact component={TestRoute} />
          // Route for your Title page
          <Route path="/Title" component={Title} />
        </Switch>
      </HashRouter>
    );
  }
}

Key Notes to Remember #

• Ensure your Title component (imported from ./app) is a valid React component with a default export.
• If you use MemoryRouter, the URL won't update when navigating — this is great if you don't want users to bookmark specific views within your WebPart.

内容的提问来源于stack exchange，提问作者prabhat katoch