React使用react-router-dom点击Link链接后对应视图无法加载求助

AI 小北

2026-9-27

问题根因

你当前使用的是React Router v6版本，该版本对Route组件的API做了不兼容更新，你沿用的v5版本的render、component属性以及exact配置在v6中已经全部废弃，所以路由匹配后无法正常渲染对应组件。
React Router v6默认开启路径精确匹配，不需要额外加exact属性。

修正方案

只需要修改App.js中Routes包裹的Route部分代码即可，修正后的完整App.js代码如下：

import React, {Component} from 'react';

import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';

import Buyer from './Container/Buyer/Buyer';
import Seller from './Container/Seller/Seller';

import classes from './App.css';

class App extends Component{
  render(){
    return(
      <BrowserRouter>
        <div className={classes.App}>
          <p>Shop</p>
      
               <Link to='/buyer'>I want to Buy</Link>
               <Link to='/seller'>I want to Sell</Link>
             
          
           <Routes>
             <Route path="/buyer" element={<Buyer />} />
             <Route path="/seller" element={<Seller />} />
           </Routes>

        </div>
      
      </BrowserRouter>
       
    )
  }
}

export default App;