如何配置 React-Router 实现路由切换

[lgwebdream]

[lgwebdream]

扫描下方二维码，获取答案以及详细解析，同时可解锁800+道前端面试题。

[gujiwuqing]

import { Switch,BrowserRouter as Router ,Route} from 'react-router-dom'

<Router>
<NavLink to='/'>首页</NavLink>
<NavLink to='/test'>测试</NavLink>
<Switch>
<Route path='/' component={Home}/>
<Route path='/test' component={Test}/>
</Switch>
</Router>

[LoveWei0]

配置react Router 实现路由切换

import { useRoutes } from "react-router-dom"
import { Navigate } from 'react-router-dom'
// 引入组件
import Login from "../pages/Login";
import Center from "../pages/Center";
import Music from '../pages/Center/component/Music'
import Game from '../pages/Center/component/Game'
import News from '../pages/Center/component/News'
import Count from '@/pages/Count'
import TodoList from '@/pages/TodoList/index'
import SubmitBottom from '@/components/SubmitBottom'
//路由表
export const routes = [
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/count",
    element: <Count />
  },
  {
    path: '/todo',
    element: <TodoList />
  },
  {
    path: '/submitBottom',
    element: <SubmitBottom />
  },
  {
    path: "/center",
    element: <Center />,
    children: [
      {
        path: "/center/music",
        element: <Music />
      },
      {
        path: "/center/news",
        element: <News />
      },
      {
        path: "/center/game/:id?/:type",
        element: <Game />
      }
    ]
  },
  {
    path: "/",
    element: <Navigate to="/center" />
  }
];
const Router = useRoutes(routes)
export default Router