当前位置：首页 > React

react如何实现模块跳转

2026-03-10 17:07:25React

实现模块跳转的方法

在React中实现模块跳转通常涉及路由管理，以下是几种常见方法：

使用React Router

安装React Router库：

npm install react-router-dom

基本路由配置示例：

react如何实现模块跳转

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

编程式导航

在组件中通过useHistory钩子实现跳转：

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

function MyComponent() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/target-route');
  };

  return <button onClick={handleClick}>跳转</button>;
}

动态路由跳转

带参数的跳转方式：

react如何实现模块跳转

history.push({
  pathname: '/user',
  search: '?id=123',
  state: { detail: 'some data' }
});

路由守卫

通过自定义组件实现权限控制：

function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = /* 验证逻辑 */;

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

HashRouter替代方案

当项目不支持HTML5 history API时：

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

function App() {
  return (
    <HashRouter>
      {/* 路由配置 */}
    </HashRouter>
  );
}

路由懒加载

优化大型应用的加载性能：

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Route path="/lazy" component={LazyComponent} />
    </Suspense>
  );
}

以上方法涵盖了React中模块跳转的主要场景，可根据具体需求选择合适方案。React Router v6的语法略有不同，需要注意版本兼容性。