路由依赖第三方库react-router-dom

配置路由有两种方式，1：组件式（旧的写法）、2：路由表式

组件式

定义嵌套路由

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App />}>
                    <Route path="Tab1" element={<Tab1 />} />
                    <Route path="Tab2" element={<Tab2 />} />
                </Route>
                <Route
                    path="*"
                    element={<p>未设定的路由规则将在这里被捕获</p>}
                ></Route>
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
)

编写嵌套路由时，采用Outlet组件作为父组件中给子路由的占位，并最终渲染出子路由

import { Link, Outlet } from 'react-router-dom'
function App() {
    return (
        <div>
            <h1>路由练习</h1>
            <nav>
                <Link className="link" to="/Tab1">
                    Tab1
                </Link>
                <Link className="link" to="/Tab2">
                    Tab2
                </Link>
            </nav>
            <Outlet />
        </div>
    )
}