相关疑难解决方法(0)

这是我的主要部分类，其中保留了链接的所有路由

export default class Section extends React.Component {
    render() {
        return (
            <div style={{backgroundColor:"white"}}>
                   <Routes>
                   <Route path="/"  element={<Home/>} />
                    <Route path="/discover" element={<Discover/>}   />
                    <Route path="/shop/makeup" element={<Makeup/>}  />
                    <Route path="/home/:id" element={<DetailsPage/>}  />
                    </Routes>
            </div>
        )}}

这是我的卡片页面，它正在从上下文中获取数据。

import React from 'react';
import {DataContext} from './CardData.js';
import {Link} from 'react-router-dom'
import '../App.css';
export default class HomeCard extends React.Component {
    static contextType = DataContext;
    render(){
        const {products} = this.context;
  return (
    <div>
      <div className="card">
                { products.map((val,index)=>{
                   return(
                    <div className="card" key={val.id}>
                    <Card style={{ width: '14rem' …

简而言之：我想在 URL 中显示 slug 而不是 Id，最好的方法是什么？

到目前为止，在我的 app.js 组件中，我以这种方式使用 React-router：

 <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={Home}></IndexRoute>
        <Route path="/profile/:slug" component={Split}></Route>
    </Route>

  </Router>

然后在我的配置文件组件中，我使用 Link 通过 slug 转到该特定配置文件：

<Link to={'/profile/' + username.slug}>{username}</Link>

我正在考虑在我的轮廓减速器或其他东西中将它们组合在一起？

任何提示都会非常有帮助！

我正在使用 React、Redux 和 React-router，并希望以下用例能够工作：

• 从显示条目列表的页面（每个条目都有一个唯一的 id 和一个已知的 slug）
• 当您单击一个条目时，您将被带到该条目的页面
• 该页面是动态加载的 - 使用页面的 id 发送 ajax 请求，并根据请求的输出填充所有内容。

如何使用每个项目的 slug 创建一个 url？现在我只有一个固定的

<Route path="/item" component={ItemPage} />

我想要的是

<Route path="/<slug>" component={ItemPage} />

只有当您从另一个页面导航到该页面时才知道 slug。

我遇到的另一个问题 - 页面的所有内容在刷新时消失。这是因为我通过 state 将 item id 传递给了 ItemPage，并且在刷新后该 id 不再设置在 state 中。

也许更一般地说，实现上述行为的方法是什么？这似乎是一个常见的用例，我找不到有关如何操作的好参考。

我要获取其中的产品列表ProductList，其中需要将选定的产品对象传递给Product。

目前，我正在尝试将idas作为路由参数传递，并再次获取product对象。但我想将整个产品对象从发送ProductList到Product。

我的路线是

<Route path={joinPath(["/product", ":id?"])} component={Product} />

ProductList组件链接

<Link to={"/product/" + this.props.product.Id} >{this.props.product.Name} </Link>

如何传递产品对象Product作为道具？

下面的代码在Typescript中引发错误，表示LinkType 上不存在以下属性。

<Link to={"/product/" + this.props.product.Id} params={product}>{Name}</Link>

我尝试了以下问题，但似乎没有问题。

• 在Link react-router中传递道具 <--- this is similar to my issue, but answer doesn't work for react-router v4
• react-router-将道具传递给处理程序组件
• 反应：传递属性

我有组件页面的链接,例如:

<Link to="/"> Home <Link/> 

在props中我有一个参数,例如userId.我需要在Link中传递它.我知道如何通过params onCLick():

this.props.router.push({
  pathname: '/',
  state: {
    userId: 7
  }
})

我可以如何理解墨水onClick,但也许可以通过某种方式传递它？没有创造onClick？