单击重定向时如何动态更改 url？反应

Question

如何动态改变url？这个 url 'www.example.com' 正在根据我使用它的位置而变化，如下所示，查询字符串也在根据组件和卡 ID 发生变化。

这是我的代码的简单示例：

return (
props.news.map((content, index) =>
<NewsCard 
key={index}
title={content.title}
text={content.text}
onClick={() => {
location.href = 'www.example-news.com/?a=query';
}}
/>
<JurnalistCard
key={index}
person={content.person}
name={content.name}
onClick={() => {
location.href = 'www.example-jurnaist.com/?a=query';
}}/>
))

Json 文件:

export const news: News[] = [
  {
        title: 'Title1',
        text: 'Text test',
        queryString1: 'queryString',
        queryString2: 'queryString',
        person: 'Full Name',
        name: 'John'
  },
 {
        title: 'Title1',
        text: 'Text test',
        queryString1: 'queryString',
        queryString2: 'queryString',
        person: 'Full Name',
        name: 'John'
  },
 {
        title: 'Title1',
        text: 'Text test',
        queryString1: 'queryString',
        queryString2: 'queryString',
        person: 'Full Name',
        name: 'John'
  }
]

我是 React 新手，请帮忙。

Answer 1

你可以在道具中发送 url 并做这样的事情

return (
    props.news.map((content, index) =>
    <NewsCard 
        key={index}
        title={content.title}
        text-{content.text}
        onClick={() => {
            location.href = content.newsUrl;
        }}
     />
     <JurnalistCard
         key={index}
         person={content.person}
         name={content.name}
         onClick={() => {
             location.href = content.journalistUrl;
     }}/>
 ))

如果您不能将 url 存储在 props 中，并且您使用其他值来构成查询，则可以像这样构造它：

{"'www.example-news.com/?a=" + content.title}

单击重定向时如何动态更改 url？反应

How to change the url dinamically when redirecting on click? React

redirect

query-string

typescript

reactjs

react-router