# react-question-v5

**Repository Path**: qing-icon/react-question-v5

## Basic Information

- **Project Name**: react-question-v5
- **Description**: 框架：react、
路由：react-router-dom v5 版本、 
主要内容：calss 类 编写
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: router-v5
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-09
- **Last Updated**: 2023-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


1.项目是由 **npx create-react-app my-app** 脚手架搭建 

2.进入项目  **cd my-react-first** 

3.下载相关依赖 **yarn** or **npm install**

4.运行项目 
 ####  **`yarn start`**

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


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

6.路由配置 (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 './pages/Home'
import Mine from './pages/tabbar/mine'
import Class from './pages/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>
        )
    }
```
###5 router.js 单独抽出router
##### router.js 代码
```
import React from 'react';
import Home from '../pages/home'
import Detail from '../pages/detail'

import Text from '../pages/text/index'
import TextOne from '../pages/text/children/textOne'
import TextToo from '../pages/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 的版本继续更新，至于这个，就先放在这里吧 。
- 在当前的基础上创建了一个新的分支 router-v5 用来承载降低版本后的代码
- 降低 react-router-dom 版本到v5


### router-v5 分支  
>在react-router-dom 降低到v5版本之后， 就不能像v6版本一样在js统一的地方定义路由，而是在同一级别下的路由可以定义到一起。想要嵌套路由，则在嵌套路由的页面再增加路由，
这无疑是将页面路由分开来写了 。 

index.js 如下：
```
//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

import Text from './pages/text/index'

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={App} > </Route>
      <Route path="/text" component={Text} to="/text/textOne" />
    </Switch>
  </BrowserRouter>
  ,
  document.getElementById('root')
);

```
text/index.jsx 如下

```
//text/index.jsx

import React from 'react';
import { Switch, Route } from 'react-router-dom'

import textOne from './children/textOne'
import textToo from './children/textToo'

export default class Text extends React.Component {
    componentDidMount() {
        console.log(this);
    }
    render() {
        return (
            <div>
                我是text文件
                <hr />
                {/* <Outlet></Outlet> */}
                <Switch>
                    <Route index component={textOne} />
                    <Route path="/text/text问题1：当路由到 '/text' 的时候，嵌套的两个组件没有出现 

解决办法 ：
```
import React from 'react';
import { Switch, Route } from 'react-router-dom'

import textOne from './children/textOne'
import textToo from './children/textToo'

export default class Text extends React.Component {
    componentDidMount() {
        console.log(this);
    }
    render() {
        return (
            <div>
                我是text文件
                <hr />
                {/* <Outlet></Outlet> */}
                <Switch>
                    <Route path="/text/textOne" component={textOne}></Route>
                    <Route path="/text/textToo" component={textToo}></Route>
                    <Route index component={textToo}></Route>
                </Switch>
            </div>
        )
    }
}
```
**注意：** `<Route index component={textToo}></Route>` ,必须写在路由的最后面，因为js是从上向下执行，当先执行它时后面的路由就无法跳转了，
 
问题2：当进入未定的路由的时候怎么办（路由守卫）
解决办法：用`Redirect` , 它和v6版本区别很大，必须这样写 
```
 <Route path="/NotFound" component={NotFound} />
 <Redirect path="*" to="/NotFound" />
```
**注意：** 应该先定义路由，再确定重定向所需要的路由
One" component={textOne}></Route>
                    <Route path="/text/textToo" component={textToo}></Route>
                </Switch>
            </div>
        )
    }
}
```
- 同样我们可以在每个需要嵌套路由的页面都增加一个router.js 用以存放当前路由
- 这样写路由诚然也是一种新的思路
- 但由于想要要实现vue那样统一管理路由就没了办法
- 所以我发现了一个能够将路由统一管理的插件 react-router-config

#### 问题1：当路由到 '/text' 的时候，嵌套的两个组件没有出现 

解决办法 ：
```
import React from 'react';
import { Switch, Route } from 'react-router-dom'

import textOne from './children/textOne'
import textToo from './children/textToo'

export default class Text extends React.Component {
    componentDidMount() {
        console.log(this);
    }
    render() {
        return (
            <div>
                我是text文件
                <hr />
                {/* <Outlet></Outlet> */}
                <Switch>
                    <Route path="/text/textOne" component={textOne}></Route>
                    <Route path="/text/textToo" component={textToo}></Route>
                    <Route index component={textToo}></Route>
                </Switch>
            </div>
        )
    }
}
```
**注意：** `<Route index component={textToo}></Route>` ,必须写在路由的最后面，因为js是从上向下执行，当先执行它时后面的路由就无法跳转了，
 
#### 问题2：当进入未定的路由的时候怎么办（路由守卫）
解决办法：用`Redirect` , 它和v6版本区别很大，必须这样写 
```
 <Route path="/NotFound" component={NotFound} />
 <Redirect path="*" to="/NotFound" />
```
**注意：** 应该先定义路由，再确定重定向所需要的路由

#### 问题3：当在最外层路由不匹配的时候能重定向到 '/NotFound' 页面。但是当在/text嵌套路由下的时候，不能进行重定向，且不匹配的路由都进入到默认中的路由中了 ,就比如 /text/222 => /text/textToo

解决办法：




## router-v5 分支下
### 我将再创建一个分支，名字为react-router-config分支 
### router -v5-001:仿照config思路封装路由