无法使用路由器重定向到不同页面以在单击按钮时做出反应

Question

我试图通过单击其中一个卡片组件上的按钮重定向到不同的页面。单击浏览器中的按钮后，ulr 会发生变化，但我不会被重定向。

这就是 App.js 的样子

import { useState } from "react";
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import QuizCSS from "./components/QuizCSS";
import QuizJava from "./components/QuizJava";
import QuizCpp from "./components/QuizCpp";


function App(){
  const [cards] = useState([
    {
      title: 'CSS (Basic)',
      link: '/Quiz/CSS'
    },
    {
      title: 'Java (Basic)',
      link: '/Quiz/Java'
    },
    {
      title: 'C++ (Basic)',
      link: '/Quiz/Cpp'
    },
  ]);
  
  return (  
  <Router>   
    <div>
      <section>
        <div className="container">
          <h1>Get Certified</h1>
          <div className="cards">
            {
              cards.map((card, i) => (
                <div key = {i} className="card">
              <h3>
                {card.title}
              </h3>
              <Link to={card.link}>
              <button className="btn">
                Take Test
              </button>
              </Link>
            </div>
              ))
            }
          </div>
        </div>
      </section>
      
      
      <Routes>
          <Route path="/Quiz/CSS" element={<QuizCSS />} />
          <Route path="/Quiz/Java" element={<QuizJava />} />
          <Route path="/Quiz/Cpp" element={<QuizCpp />} />
        </Routes>
    </div>
  </Router>  
  );
}

export default App;

这就是 QuizCSS.js 的样子

import React from 'react'

function QuizCSS(){
    return(
        <div>
            <h1>Quiz</h1>
        </div>
    );
}

export default QuizCSS;

如何确保 QuizCSS/ QuizJava/ QuizCpp 组件在单击各自的按钮时呈现。

Answer 1

不使用 Link，而是使用 useNavigate() 进行导航。 只需在您的 div 上添加一个 onClick 函数并从 React-router 导入 useNavigate 即可。

const navigate = useNavigate()
<div className="cards">
        {
          cards.map((card, i) => (
            <div key = {i} className="card" onClick={()=> navigate({card.link})}>
          <h3>
            {card.title}
          </h3>
          <button className="btn">
            Take Test
          </button>
        </div>
          ))
        }
      </div>