react-router-dom 的鏈接更新 URL 而不渲染組件

Question

我正在使用 react-router-dom 鏈接組件來管理我的導航，但它不起作用。 鏈接更改了 URL 但不渲染組件。 這是一個描述我的問題的簡單應用程序。 我正在嘗試使用我的應用程序 header 作為 go 主頁鏈接：

    import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import React from 'react';

const Navigation = () => {
  return (
    <div>
      <Link to="/events">
        <h1>My Application</h1>
      </Link>
    </div>
  );
};
const ConnectedNavigation = connect((state) => state)(Navigation);

export default ConnectedNavigation;

App.jsx 代碼：

import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../store/index';
import ConnectedDashboard from './Dashboard';
import ConnectedEventDetails from './EventDetails';
import { Router, Route } from 'react-router-dom';
import { history } from '../store/history';
import ConnectedNavigation from './Navigation';

export const Main = () => (
  <Router history={history}>
    <Provider store={store}>
      <div>
        <ConnectedNavigation />
        <Route exact path="/events" render={() => <ConnectedDashboard />} />
        <Route
          exact
          path="/event/:id"
          //match prop is necessary in order to determine which event
          //we are looking for
          render={({ match }) => <ConnectedEventDetails match={match} />}
        />
      </div>
    </Provider>
  </Router>
);

如您所見，我在路線上添加了准確信息以避免任何混淆

Answer 1

這個問題來自這一行：

import { Router, Route } from 'react-router-dom';

正確的導入是：

import { BrowserRouter as Router, Route } from 'react-router-dom';