将 React Router Link “to” 参数作为道具传递

阿纳布达斯

这是我的主页,它由多个相同的组件组成,但细节不同。我想要达到的目的是点击 blogItem 让我进入它的独特页面

export default function Bloghome() {
const blog_1_category="tech";

//removing the multiple unnecessary variables for convenience 

return (
    <>
        <div className="blog-it-1">
          <Blogitem
            cat={blog_1_category}
            title={blog_1_title}
            desc={blog_1_desc}
          />
        </div>

        <div className="blog-it-2">
          <Blogitem
            cat={blog_2_category}
            title={blog_2_title}
            desc={blog_2_desc}
          />
        </div>
</>
);
}


这是我的 BlogItem 组件

export default function Blogitem(props) {

  const {cat,title,desc}=props;

  return (
    <>
      <div className="blog-item-border">
        <img src={person} alt="" className="blog-item-img" />
        <div className="blog-item-category">{cat}</div>
        <div className="blog-item-title">{title}</div>
        <div className="blog-item-desc">
          {desc}
        </div>
        <div className="blog-item-button">
          <Link to="/">
            <button>Read Post</button>
          </Link>
        </div>
      </div>
    </>
  );
}

在这个我想传递一个地址作为道具,让说谁的值是 address_1="/blog-1" 并将其分配给这样的链接

<Link to={address_1}>   <button>Read Post</button>   </Link>

我试过这样做,在互联网上搜索文章和视频,但没有成功

伊苏鲁·佩雷拉

在您的 App.js 类中,首先定义您的路线。

function App(prop) {
  const {isLoggedIn} = props;
  return (
      <ThemeProvider theme={theme}>
              <BrowserRouter>
                  <Switch>
                    <Route exact path='/' component={Bloghome}/>
                    <Route exact path='/posts/:blogID' component={Blogitem}/>
                  </Switch>
              </BrowserRouter>
      </ThemeProvider>
  );
}

现在在您的 Blogitem 类中,您可以将 id 作为 url 参数读取。

export default function Blogitem(props) {

  const {cat,title,desc}=props;
  let { blogID } = useParams();

  return (
    console.log(blogID);
    <>
      <div className="blog-item-border">
        <img src={person} alt="" className="blog-item-img" />
        <div className="blog-item-category">{cat}</div>
        <div className="blog-item-title">{title}</div>
        <div className="blog-item-desc">
          {desc}
        </div>
        <div className="blog-item-button">
          <Link to="/">
            <button>Read Post</button>
          </Link>
        </div>
      </div>
    </>
  );
}

您可以在创建链接时将项目 ID 作为 URL 参数传递。

<div className="blog-item-button">
  <Link to="/posts/001">
    <button>Read Post</button>
  </Link>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章