如何通过在反应路由器中单击按钮来导航路径？

React 路由器是用于 React 应用的强大库，可以帮助我们在应用中实现单页应用程序（SPA）的导航。通过添加链接和路由，我们可以使用户能够在不重新加载页面的情况下浏览我们的 React 应用。但是，我们可以很方便地通过单击按钮来导航路径。

在 React 中使用路由器

在 React 中使用路由器需要安装 react-router-dom。我们可以使用以下命令进行安装：

npm install --save react-router-dom

创建路由器

要使用路由器，我们需要首先创建一个路由器组件。我们可以在我们的应用程序顶层组件中包含路由器组件，并定义我们的路由。在下面的示例中，我们定义了两个路由，一个是主页，另一个是关于我们页面：

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

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

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

export default App;

这里我们使用了 BrowserRouter，但是还有其他类型的路由器可供选择。路径定义通过 Route 元素实现，其中 component 属性指定要呈现的组件。路由的顺序很重要，应该将准确的路由放在模糊的路由前面。例如，如果我们将 /about 放在 / 前面，则永远不会显示 About 组件。

用户单击按钮

现在，让我们将一个按钮添加到我们的组件中，以便用户单击后导航到我们的路由中。我们可以在导航栏下添加一个按钮，当用户单击该按钮时，我们将引导他们浏览到主页。此外，我们还可以通过在 Link 上添加一个 onClick 处理程序来在单击链接时触发某些事件。

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

function Navigation(props) {

  const handleClick = () => {
    props.history.push('/')
  }

  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <button onClick={handleClick}>Home</button>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

export default withRouter(Navigation);

在上面的示例中，我们使用 withRouter 调用 Navigation 组件，以便我们可以访问路由器的 history 对象。然后，我们可以通过在 handleClick 中调用 props.history.push('/') 来导航到主页。最后，我们将 Navigation 组件包装在 BrowserRouter 中，以便我们的路由器可以正常工作。

我们还可以使用 this.props.history.push('/') 代替 props.history.push('/')，但前提是我们将 Navigation 组件从函数组件更改为类组件，并使用 this 来引用属性。

结论

通过单击路由器中的链接或按钮，我们可以轻松地实现路径导航。React 路由器允许我们定义和管理我们的路由，并与我们的组件集成。这样，我们可以创建强大而又简单的单页应用程序，而无需重新加载页面。请记住，应该将准确的路由放在模糊的路由前面，并使用 withRouter 调用组件以获得访问路由器的 history 对象。