web前端全系列 教程
1839个小节阅读:2244.1k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
useRoutes
跟<Routes>
有同等的功能,只不过它使用对象来替代<Route>
。
xxxxxxxxxx
//router.js
import { useRoutes, HashRouter, useNavigate, Route, Routes } from 'react-router-dom'
import Home from './pages/Home'
import App from './App'
import User from './pages/User'
import Login from './pages/Login'
export default <HashRouter >
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
{/* 设置参数的key值*/}
<Route path="user" element={<User />} />
</Route>
<Route path='/login' element={<Login />} />
</Routes>
</HashRouter>
xxxxxxxxxx
//index.js
import React, { useState, useMemo, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import router from './router'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{router}
{/* 引入路由 */}
</React.StrictMode>
);
// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();
等同于
xxxxxxxxxx
//router.js
import { useRoutes, HashRouter, useNavigate, Route, Routes } from 'react-router-dom'
import Home from './pages/Home'
import App from './App'
import User from './pages/User'
import Login from './pages/Login'
export default function () {
const element = useRoutes([
{
path: '/',
element: <App />,
children: [
{ path: '', element: <Home /> },
{ path: 'user', element: <User />},
]
},
{
path: '/login',
element: <Login />
}
]
)
return element
}
xxxxxxxxxx
//index.js
import React, { useState, useMemo, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Router from './router'
import { HashRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<HashRouter>
<Router/>
</HashRouter>
</React.StrictMode>
);
// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();
实时效果反馈
1. 使用__hook可以代替
A useroutes
B useRoute
C useRoutes
D useRouter
答案
1=>C