【react 路由】使用useRoutes Api

GHUIJS

于 2022-10-08 01:03:11 发布

阅读量414

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_43599959/article/details/127201702

版权

react 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在 React 应用中使用 React Router v6 的 useRoutes 钩子来配置路由。通过包裹 BrowserRouter 组件并定义路径和组件，实现页面导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-router 6使用useRoutes hook时,需要在项目的根节点包裹一层BrowserRouter,不然报错

import { NavLink,Navigate,useRoutes } from 'react-router-dom';
import {Home} from './home';
import {About} from './about';
import './index.css'

export const ReactRouterTest = () => {

    const element = useRoutes([
        {
            path:'/home',
            element: <Home />
        },
        {
            path:'/about',
            element: <About />
        },
        {
            path:'/',
            element: <Navigate to='/home' />
        }
    ])

    return (
        <div>
            <div>
                <NavLink className='nav' to='/home'>home</NavLink>
                <NavLink className='nav' to='/about'>about</NavLink>
            </div>
            {element}
        </div>
        )
}