按照教程配置React Router后无法正常运行该如何解决

你使用的是 React Router v6 版本，如果你参考的教程发布时间较早，大概率使用的是v5版本的写法，两个大版本的API差异非常大，旧写法在v6版本下无法正常运行，按如下步骤修改即可：

• 调整组件位置：所有用到Link的组件都必须包裹在BrowserRouter内部，你当前把NavigationBar放在了BrowserRouter外部，如果该组件内也用到了路由相关组件，会直接导致上下文丢失报错，需要把它移到BrowserRouter标签内部。
• 修改Route属性：v6版本废弃了component属性，统一使用element属性传递渲染组件，属性值需要传入组件的JSX写法，不能直接传组件引用。
• 补全兜底路由配置：无匹配路径的404路由需要显式指定path="*"，否则不会触发渲染。
• 如果你需要匹配根路径/的内容，自行在Routes中添加对应Route配置即可。

修改后的完整可运行代码如下：

import logo from './logo.svg';
import './App.css';
import CoinElement from './Components/Coins/CoinElement';
import CoinHead from './Components/Coins/CoinHead';
import NavigationBar from './Components/Common/NavigationBar';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import CoinsPage from './Components/Coins/CoinsPage';
import ExchangesPage from './Components/Exchanges/ExchangesPage';
import * as React from 'react';
// 请替换为你实际的Error组件路径
import Error from './Components/Common/Error';

export default class App extends React.Component {
  render(){
  return (
    <div className="App">
        <BrowserRouter>
          <NavigationBar />
          <h2>Welcome to React Router Tutorial</h2>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/coins'} className="nav-link">Contact</Link></li>
            <li><Link to={'/exchanges'} className="nav-link">About</Link></li>
          </ul>
          </nav>
          <hr />
            <Routes>
             <Route path="/coins" element={<CoinsPage />}/>
             <Route path="/exchanges" element={<ExchangesPage />}/>
             <Route path="*" element={<Error />}/>
           </Routes>
           </BrowserRouter>
    </div>
  );
}
}

内容的提问来源于stack exchange，提问作者Guillem Soler Solé