React 18.2中采用React Router 6.4
一、安装 React Router v6
在项目根目录下运行:
npm install react-router-dom@6.4
二、基本用法 —— 配置路由
1. 基本的路由设置(使用 BrowserRouter)
在 React 18 中,通常你会在 src/main.jsx或 src/index.js中渲染你的 App 组件,并用 <BrowserRouter>包裹整个应用。
src/main.jsx(或 src/index.js)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
2. 在 App 组件中配置路由(使用 <Routes>和 <Route>)
src/App.jsx
import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
function App() {
return (
{/* 导航栏 */}
首页 |
关于
{/* 路由配置 */}
} />
} />
{/* 404 页面,匹配所有未定义的路由 */}
} />
);
}
export default App;
3. 创建页面组件
在 src/pages/目录下创建对应的页面组件,例如:
src/pages/Home.jsx
function Home() {
return 欢迎来到首页;
}
export default Home;
src/pages/About.jsx
function About() {
return 这是关于页面;
}
export default About;
src/pages/NotFound.jsx
function NotFound() {
return 404 - 页面未找到;
}
export default NotFound;
三、<Outlet />
用于在父路由组件中预留一个位置,用来渲染其子路由匹配到的组件。
可以把 <Outlet />想象成:一个插槽(slot),子路由的组件会“插入”到这个插槽中显示。
或者:
父组件说:“我负责整体布局,但中间这部分内容由你来决定(即子路由),你就放在
<Outlet />
这个位置吧!”
四、编程式导航(使用 useNavigate)
在函数组件中,可以使用 useNavigate进行编程式跳转:
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
const handleLogin = () => {
// 模拟登录逻辑...
navigate('/dashboard'); // 跳转到 dashboard
};
return ;
}
五、获取路由参数(如:/dashboard/:id)
// Route 配置
} />
// UserProfile.jsx
import { useParams } from 'react-router-dom';
function UserProfile() {
const { userId } = useParams();
return 用户ID: {userId};
}
注意,是:path="users/:userId",不是path="/users/:userId"。
六、结合 React.lazy 和 Suspense 实现按需加载(懒加载)路由
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
function App() {
return (
加载中...}>
} />
} />
);
}