如何通过参数将参数与React中的导航函数路由？

发布于 2025-01-24 06:06:20 字数 534 浏览 1 评论 0原文

有没有办法将某些参数传递给带有导航功能的路由是React？我找到了以下方法，但是它不起作用，因为第二个文件中的路由参数不确定。

import { useNavigate } from 'react-router-dom'

const exploreTopic = () =>{
    navigate(`/topic/${props.id}`,{id:props.id});
};

return(
  <div onClick={exploreTopic}>smth</div>
)

import { useParams } from 'react-router-dom'
import './style.css'

const SingleTopic = ({route,navigate}) => {
  return (
    <div>
        {route.params.id}
    </div>
  )
}

export default SingleTopic

原文

Is there a way to pass some parameters to a route with the navigate function is react? I found the below approach, but it doesn't work since the route parameter in the second file is undefined.

import { useNavigate } from 'react-router-dom'

const exploreTopic = () =>{
    navigate(`/topic/${props.id}`,{id:props.id});
};

return(
  <div onClick={exploreTopic}>smth</div>
)

import { useParams } from 'react-router-dom'
import './style.css'

const SingleTopic = ({route,navigate}) => {
  return (
    <div>
        {route.params.id}
    </div>
  )
}

export default SingleTopic

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月竹挽风 2025-01-31 06:06:20

您可以以这种方式传递数据

const exploreTopic = () =>{
    navigate(`/topic/${props.id}`,{state:{id:props.id}});
};

，而您的单元将成为

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

const SingleTopic = ({route,navigate}) => {
 const location = useLocation();

  return (
    <div>
        {location.state.id}
    </div>
  )
}

export default SingleTopic

You can pass the data this way

const exploreTopic = () =>{
    navigate(`/topic/${props.id}`,{state:{id:props.id}});
};

And your SingleTopic will become

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

const SingleTopic = ({route,navigate}) => {
 const location = useLocation();

  return (
    <div>
        {location.state.id}
    </div>
  )
}

export default SingleTopic

回复收藏 0 原文

べ映画 2025-01-31 06:06:20

使用USELOCATION：

const exploreTopic = () =>{
    navigate(`/topic/${props.id}`,{state:{id:props.id}});
};

您可以从singletopic component中删除elements {路由}：

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

function SingleTopic(){
 const location = useLocation();

  return (
    <div>
        {location.state.id}
    </div>
  )
}

export default SingleTopic

use useLocation:

const exploreTopic = () =>{
    navigate(`/topic/${props.id}`,{state:{id:props.id}});
};

you can remove the elements {route,navigate} from the SingleTopic component:

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

function SingleTopic(){
 const location = useLocation();

  return (
    <div>
        {location.state.id}
    </div>
  )
}

export default SingleTopic

回复收藏 0 原文

~没有更多了~