React（二）——注册页/登录页/Reducer/

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

0. 路由

1. 创建网站需要的所有页面

• 在src文件夹下创建pages文件夹，用来存放网站所有的页面
  
• 先将组件路由出来

function HomeLayout() {
   
  return (
    <div>HomeLayout</div>
  )
}

export default HomeLayout

2. 创建router

1. 在src/router/Route.tsx里，动态配置路由，通过allRoutes

import React from "react";
import {
    useRoutes, RouteObject } from "react-router-dom";

// 定义组件的 props 类型
interface RouterProps {
   
  allRoutes: RouteObject[];
}

const Router: React.FC<RouterProps> = ({
     allRoutes }) => {
   
  const routes = useRoutes(allRoutes);
  return routes;
};

export default Router;

2. 在src/router/routes/publicRouters.tsx里配置公共路由；由于主页，商品列表页，不需要登录也可以浏览

import Landing from "../../pages/Landing";
import Cart from "../../pages/Cart";
import {
    RouteObject } from "react-router-dom";

// 定义公共路由
const publicRoutes: RouteObject[] = [
  {
   
    path: "/",
    element: <Landing />,
  },
  {
   
    path: "/cart",
    element: <Cart />,
  },
];

export default publicRoutes;

3. 在APP.tsx里配置publicRoutes

import {
    useState } from "react";
import Router from "./router/Router";
import {
    RouteObject } from "react-router-dom";
import publicRoutes from "./router/routers/publicRoutes";

function App() {
   
  // return <RouterProvider router={router} />;
  const [allRoutes, setAllRoutes] = useState<RouteObject[]>([...publicRoutes]);

  console.log(allRoutes);
  return <Router allRoutes={
   allRoutes} />;
}

export default App;

4. main.tsx里修改路由加载方法

import {
    createRoot } from "react-dom/client";
import App from "./App.tsx";
import {
    BrowserRouter } from "react-router-dom";

createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

5. 访问localhost:5173/cart就可以访问到Cart页面的内容

3. 公共组件

1. 如果每个页面的头部和导航以及底部相同，使用子路由publicRoutes.tsx

import {
    RouteObject } from "react-router-dom";
import Landing from "../../pages/Landing";
import Cart from "../../pages/Cart";
import Register from "../../pages/Register";
import Login from "../../pages/Login";
import HomeLayout from "../../pages/HomeLayout";