实习生漂流记之react-router-dom@6

react-router-dom@6

由于上头只给了几张设计图让我做，并不是从头开始的，所以没有使用路由，单个页面独立开发的，但是呢，为了方便查看我提交的代码运行效果，让我加个路由以及导航便于查看各个页面的效果，说到路由呢，我还真不会，但是不能说自己不行啊，接着就通过各种学习途径去了解学习，对于版本肯定是最新的啦，我一直坚信一句话，

每一个版本的升级以及每一项技术的诞生都有它的原因，对于版本升级来讲，功能、性能、操作得到了很大的优化提升，这是毋庸置疑的

。
话不多说，今天主要就学了一个react router并且是需要什么学什么，只看了个大概，并且草率的使用了一下，简述知识点：
1.安装

npm install react-router-dom@6

2.新建文件夹 router创建index.jsx文件导入基本的BrowserRouter, Route, Routes

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

3.直接上代码吧，先上一张目录图，便于了解

routers -> index.jsx

/*
 * @Autor: lingchen.liu
 * @Date: 2022-03-02 09:22:15
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-03-02 16:31:49
 */
import App from "../App";
import Cockpit1 from "../pages/Cockpit1/Cockpit1";
import Cockpit from "../pages/Cockpit/Cockpit";
import SalesRepCockpit from "../pages/SalesRepCockpit";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import BounsSearch from "../pages/BounsSearch";

const MyRouter = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App />}></Route>
                <Route path="/cockpit" element={<Cockpit />}></Route>
                <Route path="/cockpit1" element={<Cockpit1 />}></Route>
                <Route path="/salesRepCockpit" element={<SalesRepCockpit />}></Route>
                <Route path="/bounsSearch" element={<BounsSearch />}></Route>
            </Routes>
        </BrowserRouter>
    )
}

export default MyRouter

全局index.js，在入口文件导入配置的路由MyRoute

/*
 * @Autor: lingchen.liu
 * @Date: 2022-02-23 09:02:04
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-03-02 16:38:28
 */
import React from 'react';
import ReactDOM from 'react-dom';
import 'reset-css'
import './index.css';
import 'antd/dist/antd.css';
import MyRouter from './router';

ReactDOM.render(
    <React.StrictMode>
        <MyRouter />
    </React.StrictMode>,
    document.getElementById('root')
);

App.js 默认初始页面

/*
 * @Autor: lingchen.liu
 * @Date: 2022-02-23 09:02:04
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-03-02 16:39:51
 */
import './App.css';
import { Link } from 'react-router-dom'
import { Button } from 'antd';

function App() {
    return (
        <div className="App">
            <Button type="primary">
                <Link to={'/cockpit'}>cockpit</Link>
            </Button>
            <Button type="primary" block>
                <Link to={'/cockpit1'}>cockpit1</Link>
            </Button>
            <Button type="primary" block>
                <Link to={'/salesRepCockpit'}>salesRepCockpit</Link>
            </Button>
            <Button type="primary" block>
                <Link to={'/bounsSearch'}>bounsSearch</Link>
            </Button>
        </div>
    );
}

export default App;

效果图，页面按钮使用的是antd ui组件：

今天的实习生活还算顺利，毕竟步入了页面仔的门道，继续加油，不捉急，一步一步来，明天就有难搞的事情了，预习下，明天再续。