如何通过React中的按钮转到另一个页面

Question

我在 React 中创建了一个导航栏，但我还想使用一个按钮将用户返回到主页。我已经创建了按钮，但不知道从这里去哪里。

BlackWhite.js

export default function BlackWhite() {
  const handleClick = () => {};
  return (
    <div className="BlackWhite">
      <h1>Black and white</h1>
      <button onClick={handleClick}>Back to homepage</button>
    </div>
  );
}

应用程序.js

import Navbar from './Navbar';
import BlackWhite from './pages/BlackWhite';
import Home from './pages/Home';
import Color from './pages/Color';
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <>
      <Navbar />
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/BlackWhite" element={<BlackWhite />} />
          <Route path="/Color" element={<Color />} />
        </Routes>
      </div>
    </>
  );
}

export default App;

Answer 1

您可以使用

useNavigate()

挂钩。

import { useNavigate } from "react-router";

export default function BlackWhite() {

    const navigate = useNavigate();

    const handleClick = () => {
        navigate('/');
    };
    return (
        <div className="BlackWhite">
            <h1>Black and white</h1>
            <button onClick={handleClick}>Back to homepage</button>
        </div>
    );
}

或者您可以使用

Link

进行导航。

<Link to='/' />

与

<a href=''>

相同。您可以自定义它。

import { Link } from "react-router-dom";

export default function BlackWhite() {

    return (
        <div className="BlackWhite">
            <h1>Black and white</h1>
            <Link to='/'>Back to homepage</Link>
        </div>
    );
}