【项目实战篇】目录结构-路由定义

一、安装相关依赖文件

less @types/node、axios...

二、目录结构定义

三、路由定义

方式一：Api 路由定义

• router.tsx

import { Navigate, createHashRouter, createBrowserRouter } from 'react-router-dom';
import Login from '@/views/Login';
import Welcome from '@/views/Welcome';
import Error404 from '@/views/404';
import Error403 from '@/views/403';

const router = [
  {
    path: '/',
    element: <Welcome />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '*',
    element: <Navigate to='/404' />
  },
  {
    path: '/404',
    element: <Error404 />
  },
  {
    path: '/403',
    element: <Error403 />
  }
];

export default createBrowserRouter(router);

• App.tsx

import { BrowserRouter, RouterProvider } from 'react-router-dom';
import Router from './router/index';
import './App.css';

function App() {
  return <RouterProvider router={Router} />;
}

export default App;

方式二：组件路由定义

• router.tsx

import { Navigate, useRoutes } from 'react-router-dom';
import Login from '@/views/Login';
import Welcome from '@/views/Welcome';
import Error404 from '@/views/404';
import Error403 from '@/views/403';

const router = [
  {
    path: '/',
    element: <Welcome />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '*',
    element: <Navigate to='/404' />
  },
  {
    path: '/404',
    element: <Error404 />
  },
  {
    path: '/403',
    element: <Error403 />
  }
];

export default function Router() {
  return useRoutes(router);
}

• App.tsx

import { BrowserRouter } from 'react-router-dom';
import Router from './router/index';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  );
}

export default App;

四、附加页面实现

1、NotFound 404

import { Result, Button } from 'antd';
import { useNavigate } from 'react-router-dom';

function NotFound() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/');
  };
  return (
    <Result
      status={404}
      title='404'
      subTitle='抱歉，您访问的页面不存在'
      extra={
      <Button type='primary' onClick={handleClick}>
        回首页
      </Button>
      }
      />
  );
}

export default NotFound;

2、NotRight 403

import { Result, Button } from 'antd';
import { useNavigate } from 'react-router-dom';

function NotRight() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/');
  };
  return (
    <Result
      status={403}
      title='403'
      subTitle='抱歉，您当前没有权限访问此页面'
      extra={
      <Button type='primary' onClick={handleClick}>
        回首页
      </Button>
      }
      />
  );
}

export default NotRight;