前端 react 框架如何实现多个页面之间跳转

React框架实现多个页面之间跳转的基本方法有：使用React Router库、状态管理工具和上下文API（Context API）来传递数据、使用链接（Link）或重定向（Redirect）组件进行导航、应用高阶组件（HOCs）与组件封装。在这些方法中，React Router是最常用和直接的工具，它可以为React应用程序提供声明式的路由管理。

让我们详细探讨React Router的使用，这是一个基于React的前端路由库，它允许我们为应用程序定义多个路由，并在这些路由之间进行跳转。通过使用React Router，我们能够创建一个单页面应用程序（SPA），在这种应用中，用户可以在不重新加载整个页面的情况下切换不同的视图和组件。

一、安装和配置React Router

首先，我们需要在我们的React项目中安装React Router。使用npm或yarn，我们可以轻松地将它添加到我们的项目中。

npm install react-router-dom

或者

yarn add react-router-dom

一旦安装完成，你可以在项目中引入必要的模块。在React项目中，通常是在一个App.js文件或一个专门的路由配置文件中进行配置。

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

二、定义路由

使用React Router，你需要使用Router、Route和Switch组件来定义页面路由。

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/about">关于我们</Link>
            </li>
            <li>
              <Link to="/contact">联系我们</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

在这个配置中，当用户点击导航中的链接时，对应的组件会在<Switch>内被渲染而不会导致页面整体刷新。

三、使用Link和NavLink组件

为了在应用程序中导航到不同的路径，你应该使用Link或NavLink组件来代替传统的<a>标签。这两个组件都能够在不触发页面重新加载的情况下更新URL。

<Link to="/about">关于我们</Link>

NavLink是特殊类型的Link，当与当前路径匹配时可以为元素加上一个active class。

<NavLink to="/about" activeClassName="active">关于我们</NavLink>

使用Link和NavLink组件是实现React应用程序内部导航的标准方式。

四、程序性的导航

除了使用<Link>组件之外，有时我们还需要在JavaScript代码中进行页面跳转，比如在表单提交之后。你可以通过使用React Router的useHistory钩子在组件中获取history对象来实现这一点。

import { useHistory } from 'react-router-dom';
function Form() {
  let history = useHistory();
  function handleSubmit() {
    // 点击提交表单后进行页面跳转
    history.push('/success');
  }
  // 表单组件的其他部分
}

通过调用history.push我们可以将用户导航到一个新的路由路径。

五、嵌套路由

在更复杂的应用中，你可能需要在应用的不同部分中拥有嵌套的子路由。React Router允许我们通过在任何路由组件内部再定义Route组件来实现路由的嵌套。

<Route path="/topics" component={Topics} />
function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Route path={`${match.path}/:topicId`} component={Topic} />
    </div>
  );
}

在这个例子中，当用户访问/topics，他们会看到一个列表的可点击的子话题。点击任意一个子话题，<Route path={${match.path}/:topicId} component={Topic} />将会渲染Topic组件，并将话题的ID作为参数传递到该组件中。这是在React中实现多层嵌套导航的一种方式。

六、路由守卫与权限控制

在多页面应用程序中，某些页面可能需要基于用户的登录状态或权限来进行访问控制。你可以使用React Router的特性配合上下文API或状态管理库如Redux来实现路由守卫。

function PrivateRoute({ children, ...rest }) {
  let auth = useAuth();
  return (
    <Route
      {...rest}
      render={({ location }) =>
        auth.user ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}