Reacthook的useRoutes()写路由表

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

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

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

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

1.  
   import Login from '../views/login/Login'
2.  
   import NewsSand from '../views/NewsSand/NewsSand'
3.  
   import Redirect from '../utils/Redirect'
4.  
   import NotFound from '../views/404/404'
5.  
   import News from '../views/news-visitor/News'
6.  
   import Detail from '../views/news-visitor/Detail'

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

1.  
   export default function Index() {
2.  
   const element = useRoutes([
3.  
   {
4.  
   path: '/login',
5.  
   element: <Login />,
6.  
   },
7.  
   {
8.  
   path: '/news-visitor',
9.  
   element: <News />
10.  
    },
11.  
    {
12.  
    path: '/detail/:id',
13.  
    element: <Detail></Detail>
14.  
    },
15.  
    {
16.  
    path: '*',
17.  
    element: <AuthComponent><NewsSand /></AuthComponent>
18.  
    },
19.  
    {
20.  
    path: '*',
21.  
    element: <NotFound />
22.  
    },
23.  
    ])
24.  
    return (
25.  
    element
26.  
    )
27.  
    }
28.  
     
29.  
    function AuthComponent({ children }) {
30.  
    const token = localStorage.getItem('token')
31.  
    return token ? children : <Redirect to='/login'></Redirect>
32.  
    }

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

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

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

1.  
   export default function App() {
2.  
   return (
3.  
   <BrowserRouter>
4.  
   <BaseRouter></BaseRouter>
5.  
   </BrowserRouter>
6.  
   )
7.  
   }

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

这篇好文章是转载于：学新通技术网