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