反应路由器从函数更改路由 - Javascript

React Router是React.js应用程序中使用的最流行的路由器。它允许我们使用一些客户端端口来实现单页面应用程序的路由。在本文中，我们将讨论如何使用React Router从函数更改路由。

安装React Router

首先，我们需要安装React Router。在命令行中进入你的项目目录并运行以下命令:

npm install react-router-dom

导入组件

我们需要导入BrowserRouter和Link组件，以便更改我们的路由。我们还需要导入我们要路由到的组件。

import { BrowserRouter, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

渲染我们的路由器

我们需要把我们的路由器包裹在BrowserRouter组件中，并定义我们的路由。

<BrowserRouter>
  <div>
    <ul>
      <li><Link to='/'>Home</Link></li>
      <li><Link to='/about'>About</Link></li>
    </ul>

    <Route exact path='/' component={Home} />
    <Route path='/about' component={About} />
  </div>
</BrowserRouter>

这里，我们定义了两个路由，一个路由到我们的Home组件，另一个路由到我们的About组件。我们还将每个路由与一个Link组件相对应，以便我们可以更改路由。

更改路由

现在我们可以在函数中更改路由。我们需要使用useHistory钩子从react-router-dom导入。这个钩子允许我们在函数中操作路由历史记录。

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

然后，我们可以在我们的组件中使用useHistory。下面是一个简单的例子，当我们点击按钮时，我们将路由到/about:

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

  function handleClick() {
    history.push('/about');
  }

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  );
}

这里，我们定义了一个名为handleClick的函数，它在调用时将路由到/about。我们将这个函数传递给一个按钮，当用户点击这个按钮时，它将调用handleClick函数并导航到指定的路由。

结论

在本文中，我们了解了如何使用React Router从函数更改路由。我们讨论了我们需要安装的React Router，导入的组件以及如何定义我们的路由。我们还讨论了如何使用useHistory钩子更改我们的路由。现在你应该有一个更好的理解如何在你的React应用程序中实现路由导航。