react初始创建及使用

 1、初始显现在相应的react脚手架：npm create react-app 项目名称

  

2、下载相应的后端包：npm run eject

紧接会出现一个文件夹：

3、搭建路由：下载包  npm i react-router-dom

4、搭建路由配置:

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

import {lazy} from 'react'

let arr = [

    {

        path: '/',

        to: '/Home'

    },

    {

        path: '/Home',

        element: lazy(() => import('../views/Home/index'))

    },

    {

        path: '/Wbw',

        element: lazy(() => import('../views/Wbw/index'))

    }

]

// 定义组件

const Router = () => {

    return (

        <HashRouter>

            <Routes>

                {

                    arr.map((item, index) => {

                        return (

                            <Route key={index} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>

                            </Route>

                        )

                    })

                }

            </Routes>

        </HashRouter>

    )

}

// 导出组件

export default Router

要注意：因为这里我只有两个文件夹，所以在配置路由的页面进行路由路径配置而不用重新封装新的组件调用，相对而言这样写比较简洁方便（偷懒方法）

5、然后在初始的 index.js 文件中导入我们刚才设置好的又有文件并实用这个路由组件并且包裹原始App组件。

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import Router from './router/routerConfig'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <Router>

    <App />

  </Router>

);

至此路由搭建完毕