react-router-dom 6.0版本设置react路由

6.0版本之前路由设置：

// App.js
import React, { Component } from 'react';

// 引入路由
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// 路由页面
import Home from './components/Home';
import Login from './components/Login';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (
            <Router>
                <ul className="topBar">
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/login">Login</Link></li>
                </ul>
                <Route exact path="/" component={Home}/>
                <Route path="/login" component={Login}/>
            </Router>
        );
    }
}
export default App;

6.0网上新版路由配置：

// App.js
import React, { Component } from 'react';

// 引入路由
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// 路由页面
import Home from './components/Home'
import Login from './components/Login'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {  }
  }
  render() { 
    return (
      <Router>
        <ul className="topBar">
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route path="/login" element={<Login/>}/>
        </Routes>
      </Router>
    );
  }
}

export default App;