在react js中路由另一个页面时隐藏组件

在React.js中，要隐藏组件并路由到另一个页面，可以使用React Router库来实现。React Router是React.js官方推荐的用于处理路由的库，它提供了一种简单且灵活的方式来管理应用程序的路由。

要隐藏组件并路由到另一个页面，可以使用React Router中的<Route>组件和<Redirect>组件。

首先，需要在应用程序的根组件中引入React Router，并设置路由规则。例如，可以使用<BrowserRouter>组件将应用程序包装起来，并在其中定义路由规则。

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

const App = () => {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/other-page" component={OtherPage} />
    </Router>
  );
}

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={() => redirectToOtherPage()}>Go to Other Page</button>
    </div>
  );
}

const OtherPage = () => {
  return (
    <div>
      <h1>Other Page</h1>
    </div>
  );
}

const redirectToOtherPage = () => {
  // 使用<Redirect>组件进行路由重定向
  return <Redirect to="/other-page" />;
}

export default App;

在上面的示例中，我们定义了两个路由规则，一个是根路径/对应的组件是Home，另一个是/other-page对应的组件是OtherPage。在Home组件中，我们添加了一个按钮，当点击按钮时，会调用redirectToOtherPage函数，该函数返回一个<Redirect>组件，将路由重定向到/other-page。

这样，当用户点击按钮时，组件会隐藏并路由到另一个页面。

需要注意的是，上述示例中使用的是React Router v6的语法，如果你使用的是React Router v5或更早的版本，语法会有所不同。请根据你所使用的版本进行相应的调整。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云轻量应用服务器（Lighthouse）。

• 腾讯云云服务器（CVM）：提供弹性计算能力，适用于各种应用场景，具有高性能、高可靠性和高安全性。了解更多信息，请访问腾讯云云服务器（CVM）产品介绍。
• 腾讯云轻量应用服务器（Lighthouse）：提供轻量级的云服务器实例，适用于个人开发者和小型团队，具有高性能、低成本和易扩展的特点。了解更多信息，请访问腾讯云轻量应用服务器（Lighthouse）产品介绍。