反应路由器和不向组件传递状态

Question

反应路由器：链接和路由不传递状态到组件

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

下面是我如何做到这一点的：

• 在App.js中，我使用BrowserRouter、Route和Switch进行路由

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

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

如何单击以查看详细组件

通过React-路由器v4传递值

Tyler McGinnis-传递道具以反应路由器的链接组件

中-如何传递道具以反应路线组件

我能够让URL更改为对应于项目的ID，但我不能让项目组件以正确的信息呈现，有时我会根据我使用的方法获得错误。我在我tem.js的div中硬编码了单词“项目组件”，当我点击主页上的图像时，它会呈现出来。否则，什么都不会呈现，否则我会收到以下两个打字错误：

pp.js：

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

export default withRouter(App);

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

TypeError:无法读取未定义的属性“props”

当上面的“render”代码从中删除并替换为“component={Item}”时，我从Item.js接收到这个错误：TypeError:无法读取未定义的属性“location”

以下是我的其他代码片段：

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.js状态设置为null，然后使用componentDidMount（）中的{Item:this.props.location.state}调用this.setState。执行此操作时，我收到以下错误：

TypeError:无法读取null的属性“img”

另外，如果我离开render={（props）=

TypeError:无法读取未定义的属性“props”

如果我更改

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

一个pp.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包装该组件。从react router dom导入withRouter，然后像这样包装App组件：

export default withRouter(App);

更多关于路由器的信息。

另外，在index.js中，确保您的

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

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

编辑：

TypeError:无法读取未定义的属性“props”

用以下代码替换您的构造函数。当实现React Component的构造函数时，超级（props）应该在任何其他语句之前，否则props将在构造函数中未定义。

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

错误：TypeError:无法读取null的属性“img”

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

<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>