前言

这几天尝试看React 官方中文文档看多了容易头疼翻看别人的都很碎片化且不是最新以至于走了很多弯路

所以我从这里开始记录从零开始如何创建一个React项目及以简单的页面跳转和传参

意在让初学者能够一步跨进React门槛 2023/5/4

这里是页面跳转传参的记录

一、vite创建React项目

要求node版本16及以上

按图依次执行即可下面是文字描述（CV即可）

① 选择目标文件夹启动cmd命令

扫描二维码关注公众号，回复： 15049576 查看本文章

② npm create vite

③ react-tips

④ 移动键盘↓键选择React回车确认

⑤ 选择JavaScript回车确认（当然你选TS也行这里以JS为例）

⑥ cd react-tips

⑦ npm i

⑧ npm run dev

⑨ 浏览器打开对应地址查看效果

效果如下：

如果你用vite创建过vue项目那么这个对于你来说是轻车熟路的

页面上的东西是创建自带的既然是自己的项目这些东西自然要清除掉

下面我们做的就是把它变成一个纯净的React项目然后写入我们自己的内容

清空App.css和index.css这两个css文件

把App.jsx写入一下内容

export default function App(){
return(
<>

</>
)
}

下面使用router来完成页面之间的跳转

当然页面跳转自然要现有页面

看下增加的文件和对应内容

src/pages/home.jsx

src/pages/notFound.jsx

下面使用路由

① 下载插件 npm i react-router-dom(此时版本为6.11.1)

npm i react-router-dom

② 创建文件

src/router/index.jsx

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

// 路由懒加载
const Home = React.lazy(()=>import('../pages/home'))
const NotFound = React.lazy(()=>import('../pages/notFound'))

export default function Router(){
return(
<BrowserRouter>
    <Routes>
        <Route path='/' element={<Suspense><Home/></Suspense>}></Route>
        <Route path='/home' element={<Suspense><Home/></Suspense>}></Route>
        {/* 定义404路由*/}
        <Route path='/404' element={<Suspense><NotFound/></Suspense>}></Route>
        {/* 未匹配的路由使用Navigate重定向到此页面 这里即notFound.jsx */}
        <Route path='/*' element={<Navigate to='/404' />}></Route> 
    </Routes>
</BrowserRouter>
)
}

引入并使用路由

App.jsx


import Router from './router'

export default function App(){
return(
<>
<Router></Router>
</>
)
}

效果：

验证路由跳转和路由重定向

home.jsx

import { useNavigate } from 'react-router-dom'

export default function Home(){
    const navigate = useNavigate()
    // 箭头函数
    const toList = ()=>{
        navigate('/list')
    }
    // 非箭头函数
    function redirectToNotFound(){
        // 随意一个没有定义的路由 验证是否重定向
        navigate('/sdf')
    }
return(
<>
<h1>this is home page</h1>
{/* 点击事件为 onClick */}
<button onClick={toList}>正常跳转至list页面</button>
<button onClick={redirectToNotFound}>重定向跳转至404页面</button>
</>
)
}

动态效果：