admin管理员组文章数量:1634365
目录
01 引入路由插件
02 创建目录
03 写入router.js
04 开始使用
05 实现效果
01 引入路由插件
React和vue不同,React的路由必须先安装,导入才能正常使用。
默认安装最新的v6版本
cnpm install react-router-dom
安装完成后在 package.json 文件中 会多一项 "react-router-dom" 属性,就说明已经安装成功。
02 创建目录
在src目录下创建 router文件和 page文件
router文件和 vue的router是一个意思,都是用来放需要跳转的页面,而且写法也是相同的。
page文件和 vue的views也是一样,用来存放页面和组件的。
03 写入router.js
// router index.js
import A from "../pages/A";
import B from "../pages/B";
import C from "../pages/C";
const routers = [
{
path: '/',
name: 'A页面',
components: A // 引入pages文件下的页面
},
{
path: '/B',
name: 'B页面',
components: B
},
{
path: '/C',
name: 'C页面',
components: C
}
]
export default routers; // 将数组导出
// pages A.js 一个简单的页面组件
import React from 'react';
function A() {
return (
<div> A页面 </div>
)
}
export default A;
// pages B.js
import React from 'react';
function B() {
return (
<div> B页面 </div>
)
}
export default B;
// pages C.js
import React from 'react';
function C() {
return (
<div> C页面 </div>
)
}
export default C;
04 开始使用
在入口index.js 文件下 引入 react-router-dom 的 BrwoserRouter 或者 HashRouter 用来包住App整个页面
如果只用来跳转页面不传参的话两者二选一都可以
BrowserRouter传参会比HashRouter方便一些,各取所需吧。
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, HashRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
下面是App.js
先引入两个文件 路由文件 和 安装的路由插件。
Routes 和 vue 的 router-view 相似,有切换页面的作用。
Link 和 vue 的 router-link 一样,页面跳转的作用。 <Link to='A页面的路径'>A页面</Link>
Route 渲染组件 <Route path='A页面的路径' element={<注册的页面 />}></Route>
有一点不同的是,vue 的 router-view 标签里面什么也不用写,它会根据跳转的页面自动匹配并渲染组件。
而 React 的 Routes 标签下需要渲染组件,也就是Route标签。
如果一个一个注册的话太麻烦了,所以我就用了一个懒人方法。用数组自带的map函数遍历出来。这样不管router文件下有几个页面就都可以遍历出来。
// App.js
import './App.css';
import routers from './router'; // 路由文件
import { Routes, Link, Route } from 'react-router-dom'; // 路由插件
function App() {
return (
<div className="App App-header">
{
routers.map((item, index) => (
<Link to={item.path} key={index}> {item.name} </Link>
))
}
<br />
<Routes>
{
routers.map((item, index) => (
<Route path={item.path} key={index} element={<itemponents />}></Route>
))
}
</Routes>
</div >
);
}
export default App;
注意: 在React中直接遍历渲染 Dom 在控制台中会提示一个报错。
这句话的意思是没有给 Link标签设置 key 唯一属性,所以在遍历相同标签Dom的时候应该添加一个key属性。
05 实现效果
版权声明:本文标题:学习 React 创建路由(超简单) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729176268a1188755.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论