React如何利用hook的useRoutes()写路由表

你的组件必须是函数组件，才能用hook

1，在你组件中引入useRoutes()

import { useRoutes } from 'react-router-dom'

2，在你的组件中引入你想展示的路由

import Login from '../views/login/Login'
import NewsSand from '../views/NewsSand/NewsSand'
import Redirect from '../utils/Redirect'
import NotFound from '../views/404/404'
import News from '../views/news-visitor/News'
import Detail from '../views/news-visitor/Detail'

3，利用useRoutes，写出一个路由表，并将路由表element返回出去。

export default function Index() {
  const element = useRoutes([
    {
      path: '/login',
      element: <Login />,
    },
    {
      path: '/news-visitor',
      element: <News />
    },
    {
      path: '/detail/:id',
      element: <Detail></Detail>
    },
    {
      path: '*',
      element: <AuthComponent><NewsSand /></AuthComponent>
    },
    {
      path: '*',
      element: <NotFound />
    },
  ])
  return (
    element
  )
}

function AuthComponent({ children }) {
  const token = localStorage.getItem('token')
  return token ? children : <Redirect to='/login'></Redirect>
}

4，在你的App.js文件中，引入你上面的组件，这里的BaseRouter 就是我上面的组件

import BaseRouter from './router'
import {BrowserRouter} from 'react-router-dom'

5，App.js里面，用Browser包裹，注意！这里必须包裹你的组件，否则会报错。

export default function App() {
  return (
      <BrowserRouter>
      <BaseRouter></BaseRouter>
      </BrowserRouter>      
  )
}

6，完成以上五个步骤，你就成功了！