reactjs - React Router 和 不将状态传递给组件

Question

React Router:链接和路由未将状态传递给组件

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

我正在尝试这样做:

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

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

Display item details after clicking Link in React Router

React router how to click thru to detail components

Passing values through React-Router v4 <Link />

Tyler McGinnis - Pass props to React Router's Link component

Medium - How to pass props to React routes components

我能够将 URL 更改为与项目的 ID 相对应，但我无法让 Item 组件使用正确的信息进行渲染，有时根据我使用的方法，我会收到错误。我在 Item.js 的 div 内硬编码了“Item Component”一词，当我单击主页中的图像时，它将呈现。否则，什么都不会呈现或我收到以下两个类型错误:

App.js:

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

export default withRouter(App);

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

单击主页中的图像时收到以下错误:

类型错误:无法读取未定义的属性“props”

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

<小时/>

这是我的其他代码片段:

Item.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 } ，没有任何内容按照应有的方式呈现(屏幕上只显示美元符号，因为价格部分包含硬编码的美元符号)。

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

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

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

类型错误:无法读取未定义的属性“props”

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

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

App.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);

Routes.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'));

编辑:

类型错误:无法读取未定义的属性“props”

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

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

错误:TypeError:无法读取 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>