当前位置：首页 > React

react框架如何访问页面

2026-03-31 13:49:41React

访问页面的基本方法

在React中访问页面通常涉及路由配置和组件渲染。React Router是处理页面导航的核心库，适用于单页应用（SPA）。

安装React Router：

npm install react-router-dom

配置基本路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

编程式导航

通过useNavigate钩子实现页面跳转：

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

function ButtonComponent() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/about')}>
      跳转到About页
    </button>
  );
}

动态路由与参数传递

定义带参数的路由：

react框架如何访问页面

<Route path="/user/:id" element={<UserProfile />} />

在组件中获取参数：

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

嵌套路由的实现

通过嵌套Route组件实现层级路由：

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

需要在父组件中使用<Outlet />渲染子路由：

react框架如何访问页面

import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>控制面板</h1>
      <Outlet />
    </div>
  );
}

路由守卫与权限控制

通过高阶组件保护特定路由：

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // 自定义认证逻辑
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />

静态站点生成（SSG）方案

使用如Next.js等框架实现预渲染：

// pages/about.js (Next.js)
export default function About() {
  return <div>关于页面</div>;
}

// 自动生成/about路由

服务端渲染（SSR）配置

在Next.js中通过getServerSideProps实现：

export async function getServerSideProps(context) {
  return { props: { data: await fetchData() } };
}

function Page({ data }) {
  return <div>{data}</div>;
}