reactjs - 单击链接后 View 无法加载？

Question

我正在尝试使用 React 学习 Web 开发，但陷入了无法找到未加载 View 的原因的这种情况。请有人指导我。

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" exact render={Buyer} />
             <Route path="/seller" exact component={Seller} />
           </Routes>

        </div>
      
      </BrowserRouter>
       
    )
  }
}

export default App;

Buyer.js

import React, {Component} from 'react';

import classes from './Buyer.css';

class Buyer extends Component{
    render(){

        return(
            <div className={classes.Buyer}>
                <p>I want to buy groceries</p>
            </div>
        );
    }
}

export default Buyer;

卖家.js

import React, {Component} from 'react';

class Seller extends Component{
    render(){
        return(
            <div>
                <p>I want to sell groceries</p>
            </div>
        );
    }
}

export default Seller;

点击“我想买”链接后，显示“我想买杂货”的 View 应该会出现，但什么也没有出现。

Answer 1

在 react-router-dom v6 中，Route 组件不再采用 exact、render 和 component 属性，它们现在只采用 path 和 element。 element 属性被传递给一个 JSX 文字。

例子:

<Route path="/buyer" element={<Buyer />} />

应用

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <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>
    );
  }
}