如何在React中搭建路由

1.react脚手架:

​
npm create react-app +项目名称

​

搭建路由: 下载包:

npm i react-router-dom

新建组件文件:

 

在router文件夹下新建routerConfig.ts文件,文件中配置路由:

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: '/equipment',
element: lazy(() => import('../views/Equipment/index'))
}
]
// 定义组件
const Router = () => {
在index.js中导入路由文件,使用这个路由组件包含App组件:
新建组件文件:
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

在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>
);

这些步骤可以帮助你在React应用中有效地设置和管理路由。记得根据具体的应用需求来调整路由结构和组件设计。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值