如何在链接到不同页面的按钮上使用 React Router 中的 Use Navigate？答案

【问题标题】：How do I use the Use Navigate from React Router on a button that links to different pages?如何在链接到不同页面的按钮上使用 React Router 中的 Use Navigate？
【发布时间】：2022-07-15 19:11:54
【问题描述】：

我现在有一个代表商店的按钮，点击后它会将您重定向到不同的页面，并且卡片元素已映射到外部数据。我希望这个按钮可以导航到不同的页面，请帮忙。

   const data =[
    {
        id:"Extensions",
        Title:"Electrical Collections",
        img:"/Assets/Electricals/Extlogo.png",
      

    },
    {
        id:"Phone Accesorries",
        Title:"Phone Accessories",
        img:"/Assets/Phone/phoneacc.png",
    },
    {
        id:"Homeware",
        Title:"Homeware Collections",
        img:"/Assets/Home/home.png",
    

    },
]
 function Home() {
let Navigate =useNavigate();
const handleElectricalPage =  () =>{
    Navigate("/extensionproduct")
   }
<div className='cardContainer'>
          {data.map((item )=>(
              
               <card>
               <div className='imageContainer'>
                   <img src={item.img}  alt='Extension logo'/>
                   </div>
                   <div className='contentsContainer'>
                   <h2>{item.Title}</h2>
                   <div className='iconButtonContainer'>
     
                <button onClick={handleElectricalPage}>Shop Now</button>
                   <ArrowForwardIcon className='arrowIcon'/>
                   </div>
                   </div>

【问题讨论】：

Stackoverflow 不是代码编写服务。您共享的代码仅导航到 "/extensionProduct" 路径。您自己尝试过什么来导航到不同的页面？您要导航到哪些页面？

标签： reactjs react-router

【解决方案1】：

来自反应路由器https://reactrouter.com/docs/en/v6/api#usenavigate的示例

 navigate("../success", { replace: true });

【讨论】：

【解决方案2】：

您需要动态创建一个 onClick 处理程序 (handleElectricalPage)，考虑这样的事情。

function Home() {
  let navigate =useNavigate();
  return (
    <div className='cardContainer'>
      {data.map((item) => (
        <card>
          <button 
            onClick={() => navigate(`/externalProduct/${item.id}`)}
          >
           Shop Now
          </button>
        </card>
       )}
   </div>
}

你也可以使用Link，它自己处理所有事情

<Link to={`/externalProduct/${item.id}`}>
  <button>Shop now</button>
</Link>

【讨论】：

它将我重定向到一个空白页面
你应该更新后路径到你想要的路径

【解决方案3】：

App.jsx

import { Routes, Route, Navigate } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="post/:id" element={<Detail />} />                                        
        </Route>
      </Routes>
    </div>
  );
}

export default App;

Post.jsx

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

export default function Post(props) {
const navigate = useNavigate()                                                  
      {props.posts.map((post) => {
        return (
          <div className="post__container" key={post.id}>
            <h4>
              {post.id}&nbsp; {post.title}
            </h4>
            <p>{post.body}</p>                                                                                                                                      
            <button onClick={() => {return navigate(`${post.id}`)}}>Detail</button>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
          </div>                                                                                                                                                                                        
        );
      })}      
}

Detail.jsx

import axios from 'axios'
import React, {useEffect, useState } from 'react'
import {useParams} from 'react-router'
 
export default  function Detail (props) { 

    const params = useParams()                          
    const [posts, setPosts] = useState({})              
    
    
    async function getById(id) {                        
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts/" + id)
        setPosts(response.data)                         
    }

     useEffect(() => {                                  
                                                        
        getById(params.id)                             
     }, [params.id])


return (
<div>
    <h2>Detail page: {params.id}</h2>
    <h4>{posts.title}</h4>
    <h5>{posts.body}</h5>
</div>
)
}

【讨论】：