# react-question-v6

**Repository Path**: akaedu2012/react-question-v6

## Basic Information

- **Project Name**: react-question-v6
- **Description**: 框架：react、 
路由：react-router-dom v6 版本、
主要内容：hook

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-01-24
- **Last Updated**: 2025-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 创建React应用程序入门
## 前言
- 这是一个react + hook 的项目，主要是用于写一些遇到的问题，和一些小的dome的集合，同时我也在做vue，希望能够双向发展，大家一起努力吧  
- **我深怕自己本非美玉，故而不敢加以刻苦琢磨，却又半信自己是块美玉，故又不肯庸庸碌碌，与瓦砾为伍。
    无所作为则人生太长，欲有所为则人生太短，如今啊，我有太多金色的梦想，都遗失在了生活的路上
    知不可忽骤得，托遗响 于悲风**
## 1.新建工程
### 1.1 项目是由 **npx create-react-app my-app** 脚手架搭建 
[英文官网地址](https://create-react-app.dev/docs/getting-started)
[中文官网地址](https://create-react-app.bootcss.com/docs/adding-a-sass-stylesheet)

### 1.2 进入项目  **cd my-app** 

### 1.3 下载相关依赖 **yarn** or **npm install**

### 1.4 运行项目  **`yarn start`** 或 `npm start`

### 1.5 以开发模式运行应用程序<br />

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).


Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

## 2. 安装插件

### 2.1.1 [安装scss方法](https://create-react-app.dev/docs/adding-a-sass-stylesheet)
[中文地址](https://create-react-app.bootcss.com/docs/adding-a-sass-stylesheet)

npm install sass
**or**
yarn add sass

- 安装完成后即可使用
- 要在Sass文件之间共享变量，可以使用Sass的@use规则。例如，src/App.scss和其他组件样式文件可以包括@use“./shared.scss”；具有变量定义。
```  
@use 'styles/_colors.scss'; // assuming a styles directory under src/
@use '~nprogress/nprogress'; // loading a css file from the nprogress node module
```
注意：您可以在路径前面加上~，如上所示，以解析node_modules中的模块。

### 2.1.2 sass还支持sass_PATH变量。
- 要使用相对于指定路径的导入，可以在项目根目录下添加一个.env文件，该文件的路径在SASS_path环境变量中指定。要指定更多目录，可以将它们添加到SASS_PATH中，用：like path1:path2:path3分隔。
- 注意：对于Windows操作系统，请用分号分隔路径。
```
SASS_PATH=path1;path2;path3
```
### 2.2 Adding a Router 添加路由
[React Router 官网地址](https://reactrouter.com/en/main)

Create React App没有规定具体的路由解决方案，但React Router是最受欢迎的解决方案。

要添加它，请运行：
```
npm install --save react-router-dom
```
or
```
yarn add react-router-dom
```

- **Node:** react-router、react-router-dom、react-router-native 关系
react-router 为 React Router 提供核心路由功能，但是你不需要直接安装 react-router；
如果你写浏览器端应用，你应该安装 react-router-dom；
如果你写 React Native 应用，你应该安装 react-router-native；
当你安装 react-router-dom 或 react-router-native 时，都会将 react-router 作为依赖安装。


## 2.3.1 安装 **react-router-dom** 如果不了解可以[戳这里:react-router 官网](https://reactrouter.com/)
- ps:不要有疑惑 react-router-dom 只不过是 react-router的一个分支

### 2.3.2 启动端口ip配置 

```
  "scripts": {
    "start": "set PORT=4400  HOST=192.168.1.103 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```


### 2.3.3 路由配置 (ps:看起来很简单，摸索起来确实挺困难)
```
import React from 'react';
import ReactDOM from 'react-dom';

import { BrowserRouter, Routes, Route } from 'react-router-dom'

import App from './App.jsx'
import Home from './views/Home'
import Mine from './views/tabbar/mine'
import Class from './views/tabbar/class'
ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route exact path='/' element={<App />} >
        <Route index element={<Class />} />   //索引路由
        <Route path="class" element={<Class />} />
        <Route path="mine" element={<Mine />} />
      </Route>
     <Route  exact path='home' element=<Home /> />
    </Routes>
  </BrowserRouter>
  ,
  document.getElementById('root')
);
```
- `<BrowserRouter>` 和 `<HashRouter>` 都行，只不过前端展示形式不一样而已 
- `<App />` 组件里面嵌套路由，`<Class /> `和`<Mine />` 先要显示 必须在 `<App />` 里面挖个坑（和vue中的 `<router-view />`）类似 ，React-router 中叫做 `<Outlet></Outlet>`
```
import { Link, Outlet } from 'react-router-dom'
   render() {
        return (
            <div>
                <Outlet></Outlet>
            </div>
        )
    }
```
### 2.3.4 router.js 单独抽出router
##### router.js 代码
```
import React from 'react';
import Home from '../views/home'
import Detail from '../views/detail'

import Text from '../views/text/index'
import TextOne from '../views/text/children/textOne'
import TextToo from '../views/text/children/textToo'

export const whiteRoutes = [
    {
        path: '/home',
        component: <Home />
    },
    {
        path: '/detail',
        component: <Detail />

    },
    {
        path: '/text',
        component: <Text />,
        redirect:<TextToo />,
        children: [
            {
                path: 'textOne',
                component: <TextOne />,
            },
            {
                path: 'textToo',
                component: <TextToo />,
            },
        ]
    }
]

```

#### index.js 文件如下：
```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { whiteRoutes } from './router/index'



ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route exact path='/' element={<App />} > </Route>
      {
        whiteRoutes.map(route => (
          route.children ?
            <Route key={route.path} exact path={route.path} element={route.component} >
              {
                route.redirect
                  ? <Route index element={route.redirect} />
                  : <Route index element={route[0].component} />
              }
              {
                route.children.forEach(val => <Route key={val.path} path={val.path} element={val.component} />)
              }
            </Route>
            : <Route key={route.path} exact element={route.component} />
        ))
      }
    </Routes>
  </BrowserRouter>
  ,
  document.getElementById('root')
);

```

- 这种写法本质上和全部写在index.js中没有什么区别，只是定义的更像vue 更加统一而已 
- 并且还能做更加详细的拆分

#### index.js 将路由进行封装 
- 上面的代码，未进行封装，路由只能增加到第二层，所以对路由进行封装
```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { whiteRoutes } from './router/index'



ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route exact path='/' element={<App />} > </Route>
     {rouerDom(whiteRoutes)} 
    </Routes>
  </BrowserRouter>
  ,
  document.getElementById('root')
);

function rouerDom(items) {
  return items.map(route =>
    route.children ?
      <Route key={route.path} exact path={route.path} element={route.component} >
        {
          route.redirect
            ? <Route index element={route.redirect} />
            : <Route index element={route[0].component} />
        }
        {rouerDom(route.children)}
      </Route>
      : <Route key={route.path} exact path={route.path} element={route.component} />
  )
}
```
#### 未找到 线路  
  当没有其他路由与 URL 匹配时，您可以使用path="*". 此路由将匹配任何 URL，但具有最弱的优先级，因此路由器仅在没有其他路由匹配时才会选择它。
```
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}
```
### 全局定义  
```
//index.js

React.Component.prototype.$http = 'www.baidu.com'

```

### [链路式导航](https://reactrouter.com/docs/en/v6/getting-started/tutorial#navigating-programmatically)
- 目前react-router-map v6 版本只支持 Hook 链路式导航，我也是很悲催了 ，所以链路导航就只更新到了 /text/textToo 路由。
- 我将复制代码更换版本库，降低react-router 的版本继续更新，至于这个，就先放在这里吧 。
- 等到 v6 版本支持更多了再说吧 
  
- 拜拜~~~

--https://gitee.com/dream-sk/react-ts-antd-fastmsg.git  

## 3.引入UI组件
### 3.1 安装antd UI 

```
yarn add antd
```
### 3.2 引入layout布局