二、【React-Router6】一级路由 Routes + Route

• 如果遇到控制台报如下警告，可点击访问 react 18 的 createRoot

• 项目修改自 二、【React-Router5】路由的基本使用 的 Demo

• 这里需要注意的变化

  • <Switch> 变成了 <Routes> 且必写，功能不变

• CODE（App.js）

import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'

export default function App() {
    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h1>React Router Demo</h1></div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group" style={{ whiteSpace: 'pre-wrap' }}>
                        <NavLink className="list-group-item" to="/about">About</NavLink>
                        <NavLink className="list-group-item" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body" style={{ whiteSpace: 'pre-wrap' }}>
                            <Routes>
                                <Route path='/about' element={<About />} />
                                <Route path='/home' element={<Home />} />
                            </Routes>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

• Result