响应 URL 链接更改但不呈现

Question

我在我的 Link 中使用了 <nav>，它确实改变了 URL 但没有切换页面组件！

问题：为什么我的页面组件没有随着 URL 更改而加载？

文件：index.tsx

import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { store } from '@store';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
import {
  SigninPage,
  HomePage,
  UserManagementPage,
  SiteContentPage,
} from '@pages';
import { ProtectedRoute } from '@components';

import '@styles/main.scss';

import './index.scss';

export function App() {
  return (
    <Provider store={store}>
      <div id='app'>
        <Router>
          <Switch>
            <Route exact path='/signin' component={SigninPage} />
            <ProtectedRoute path='/' component={HomePage} />
            <ProtectedRoute path='/sitecontent' component={SiteContentPage} />
            <ProtectedRoute
              path='/usermanagement'
              component={UserManagementPage}
            />
          </Switch>
        </Router>
      </div>
    </Provider>
  );
}

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

serviceWorker.unregister();

文件：ProtectedRoute.tsx

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { IAppState } from '@store';
import { ReactComponent as AdaptLogo } from '@assets/images/adaptLogo.svg';
import { NavLink, Link } from 'react-router-dom';

interface IProtectedRoute {
  path: string;
  component: React.FunctionComponent;
}

export const ProtectedRoute: React.FC<IProtectedRoute> = ({
  path,
  component: Component,
}) => {
  // check if user is authenticated or else route them to the SigninPage
  const isUserAuthenticated = useSelector(
    (state: IAppState) => state.user.authenticated
  );

  return (
    <>
      {isUserAuthenticated ? (
        <>
          <header>
            <AdaptLogo id='adapt-logo' />
          </header>
          <nav>
            <Link to='/'>Home Page</Link>
            <Link to='/usermanagement'>User Management Page</Link>
            <Link to='/sitecontent'>Site Content Page</Link>
          </nav>
          <main>
            <Route exact path={path} render={(props) => <Component />} />
          </main>
        </>
      ) : (
        <Redirect to='/signin' />
      )}
    </>
  );
};