React Router <Link> 和 <Route> 没有将状态传递给组件

Question

React Router：链接和路由不将状态传递给组件

我正在使用 React、Redux 和 React Router 构建一个在线购物应用程序。在主页上，显示所有项目。我希望用户能够单击图像并被带到包含该项目的项目详细信息的页面。

这是我尝试这样做的方法：

• 在 App.js 中，我使用 BrowserRouter、Route 和 Switch 进行路由
• 在 Home.js 中，我使用 react-router 的链接将主页上的图像链接到项目详细信息页面；Link 应该将 ID 作为状态传递给 Item 组件（请参阅下面的 Home.js 代码）
• Item.js 应该呈现项目详细信息页面。项目的 ID 将传递给 Item 组件，该组件将呈现该项目的详细信息。

这看起来很简单，我在 SO 和网络上看到了很多关于这个的讨论。以下是我已经尝试过的一些：

单击 React Router 中的 Link 后显示项目详细信息

反应路由器如何单击以详细了解组件

通过 React-Router v4 <Link /> 传递值

Tyler McGinnis - 将道具传递给 React Router 的 Link 组件

Medium - 如何将 props 传递给 React 路由组件

我能够获取要更改的 URL 以对应于项目的 ID，但我无法让 Item 组件使用正确的信息呈现，有时我会收到错误消息，具体取决于我使用的方法。我在 Item.js 的 div 中硬编码了“Item Component”这个词，当我点击主页上的图像时，它就会呈现出来。否则，什么都不会渲染或我收到以下两个TypeErrors：

应用程序.js：

<Route path="/products" render={(props) => (<Item {...props} id={this.props.location.id} />) }/>

export default withRouter(App);

<App />包含<BrowserRouter>在 index.js 中。

单击主页上的图像时，我收到以下错误：

类型错误：无法读取未定义的属性“道具”

当从上面的“渲染”代码中删除并替换为“component={ Item }”时，我从 Item.js 收到此错误： TypeError：无法读取未定义的属性“位置”

---

这是我的其他代码片段：

项目.js：

class Item extends React.Component {
    constructor() {
        super();

        this.state = {
            item: this.props.location.state
        }
    }

    render() {
        let item = this.state.item;
        return (
            <div className="item" key={item.id}>
                <div className="item-image">
                    <img src={item.img} alt={item.title} />
                </div>
                <div className="card-component">
                    <span className="item-title">{item.title}</span>
                    <p className="item-price"><b>${item.price}</b></p>
                    <p className="item-desc">{item.desc}</p>
                </div>
            </div>
        );
    }
}

---

Home.js（显示所有项目），项目详细信息页面的链接如下：

<Link to = 
    {{ pathname: `/products/${item.category}`,
    search: `?id=${item.id}`,
    state: {id: `${item.id}`} }}
    component={ Item }>
    <img src={item.img} alt={item.title} />
</Link>

更新

我已将<Item/>组件包装在withRouter(). 在 Item.js 中，如果我将构造函数中的状态设置为{ item: this.props.location.state }，则不会呈现任何内容（屏幕上只有一个美元符号，因为价格部分包含一个硬编码的美元符号）。

我尝试null在构造函数中设置 Item.js 状态，然后this.setState使用 { item: this.props.location.state }in调用componentDidMount()。当我这样做时，我收到以下错误：

类型错误：无法读取 null 的属性“img”

另外，如果我将render={(props) => (<Item {...props} id={this.props.location.id} />) }in留在<Route>中App.js，我会收到此错误：

类型错误：无法读取未定义的属性“道具”

如果我改<Route>回component={ Item }，并且 Item.js 构造函数状态设置为{ item: this.props.location.state }，则只会呈现美元符号。

更新：包括 App.js 和 Routes.js 代码

应用程序.js

import React from 'react';
import {
  BrowserRouter as Router,
  withRouter,
  Switch
} from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import Footer from './components/footer/Footer';
import { Routes } from './constants/Routes';


class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />
          <Switch>
            { Routes }
          </Switch>
          <Footer />
        </div>
      </Router>
    );
  }
}

export default withRouter(App);

路由.js

import React from 'react';
import { Route } from 'react-router-dom';
import Home from '../components/Home';
import Item from '../components/shopping/Item';
import Cart from '../components/cart/Cart';
import OrderStatus from '../components/footer/OrderStatus';
import GiftCards from '../components/footer/GiftCards';
import ReturnsExchanges from '../components/footer/Returns-Exchanges';
import Contact from '../components/footer/Contact';

export const Routes = <div>
            <Route exact path="/" component={ Home } />
            <Route path="/products" component={ Item }/>
            <Route path="/cart" component={ Cart } />
            <Route path="/order-status" component={ OrderStatus } />
            <Route path="/gift-cards" component={ GiftCards } />
            <Route path="/returns-exchanges" component={ ReturnsExchanges } />
            <Route path="/contact" component={ Contact } />
            </div>

Answer 1

history在任何组件中访问对象属性的一种方法是，您需要使用withRouter. 进口withRouter从react-router-dom和包装你App组件是这样的：

export default withRouter(App);

更多关于withRouter。

另外，在 中index.js，确保您的<App />被包裹在<BrowserRouter>.

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

ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>
, document.getElementById('root'));

编辑：

类型错误：无法读取未定义的属性“道具”

将您 constructor 的替换为以下代码。当为 React Component 实现构造函数时，super(props)应该在任何其他语句之前，否则 props 将undefined在构造函数中。

constructor(props){
    super(props);
    this.state = {
        item: this.props.location.state
    }
}

错误：类型错误：无法读取 null 的属性“img”

原因：状态的初始值不应该是null。{}在这种情况下，您可以传递空对象但不能传递空对象。你试图访问img，title，price和desc在Item.js，但只有通过id在state的<Link>中Home.js。

<Link to = 
    {{ pathname: `/products/${item.category}`,
       search: `?id=${item.id}`,
       state: {id: `${item.id}`} //pass img, title, desc, price etc as well
    }}
    component={ Item }>
    <img src={item.img} alt={item.title} />
</Link>