将React Router与开关一起使用，并且在更改路由时无法让页面呈现不同的组件

React Router是一个用于构建单页面应用的路由库，它可以帮助我们在React应用中实现页面之间的导航和路由管理。开关是一个用于切换状态的组件，通常用于实现开关按钮。

将React Router与开关一起使用，可以实现在更改路由时呈现不同的组件。具体步骤如下：

首先，安装React Router库。可以使用npm或yarn命令进行安装：

npm install react-router-dom

或

yarn add react-router-dom

在应用的根组件中引入React Router的相关组件和函数：

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

在根组件中定义不同的组件，用于在不同的路由下呈现：

import Home from './Home';
import About from './About';
import Contact from './Contact';

在根组件中使用Router组件包裹整个应用，并定义路由规则：

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

在各个组件中编写对应的内容：

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Contact() {
  return <h2>Contact</h2>;
}

在需要使用开关的组件中，引入开关组件并根据开关状态决定是否进行路由切换：

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function SwitchComponent() {
  const [isSwitchOn, setSwitchOn] = useState(false);
  const history = useHistory();

  const handleSwitchToggle = () => {
    setSwitchOn(!isSwitchOn);
    if (isSwitchOn) {
      history.push('/about');
    } else {
      history.push('/contact');
    }
  };

  return (
    <div>
      <button onClick={handleSwitchToggle}>{isSwitchOn ? 'About' : 'Contact'}</button>
    </div>
  );
}

在上述代码中，我们使用useState来管理开关的状态，使用useHistory来获取路由的历史记录，并在点击开关时根据开关状态进行路由切换。

这样，当点击开关按钮时，页面会根据开关状态切换到对应的路由，从而呈现不同的组件内容。

腾讯云相关产品推荐：