react 路由使用useRoutes Api

Posted 2022-10-15 GHUIJS

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>
        )