我的链接在我的React Router应用中不起作用

时间:2018-09-27 17:33:25

标签: reactjs redux react-router

以下代码中的链接无效。我是一个初学者,我不确定问题出在哪里。 您是否有调试技巧?

谢谢

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import {fetchItems} from './actions/items';
import { connect } from 'react-redux';
import './App.css';
import Home from './components/Home.js'
import Additem from './components/Additem'
import Mybag from './components/Mybag.js'
import About from './components/About.js'
import ItemShow from './components/ItemShow.js'
import NavigationBar from './components/NavigationBar.js'

class App extends Component {


  constructor(props){
    super(props)
  }

  componentDidMount(){
    this.props.fetchItems();
  }

  render() {
    console.log("itemList: ", itemList)
    const itemList = this.props.items
    return (
      <div className="App">
      <NavigationBar />
        <React.Fragment>
          <Route exact path='/' render={routerProps => <Home {...routerProps} items={itemList}/>} />
          <Route exact path={`/items/:itemID`} component={ItemShow} />
          <Route exact path="/my_bag" component={Mybag} />
          <Route exact path="/add_item" component={Additem} />
          <Route exact path="/about" component={About} />
        </React.Fragment>
      </div>
    )
  }
}

  const mapStateToProps = state => {
    return {
      items: state.items
    }
  }

  const mapDispatchToProps = dispatch => {
    return {
      fetchItems: (items) => dispatch(fetchItems(items)),
    }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(App);

我曾经有一个组件负责在数据库中获取我的项目并加载它们。它可以正常工作,但可以重构为将提取作为redux动作包含在内,从那时起,它不再起作用。

如果您有任何提示,请告诉我。

谢谢!

2 个答案:

答案 0 :(得分:0)

用react-router的withRouter函数包装连接的组件:

// Adding the imports just for clarity.
import { connect } from "react-redux";
import { compose } from "redux";
import { withRouter } from "react-router-dom";

// compose-style
compose(
  withRouter,
  connect(...)
)(YourComponent);

// Without compose
withRouter(connect(...))(Your component);

有关更多信息:withRouter API

答案 1 :(得分:0)

sn42是正确的。但是我更喜欢使用DECLARE @P0 SmallDateTime(4) SET @P0='9/27/2018 12:00:00 AM' DECLARE @P1 nvarchar(MAX) SET @P1='0' SELECT COUNT(*) FROM ( [Contract] InnerQuery_Contract INNER JOIN ( [ContractDetail] InnerQuery_ContractDetail_ContractDetail INNER JOIN [Contract] InnerQuery_ContractDetail_Contract ON [InnerQuery_ContractDetail_Contract].CompanyID IN (1, 3) AND 32 = SUBSTRING([InnerQuery_ContractDetail_Contract].CompanyMask, 1, 1) & 32 AND [InnerQuery_ContractDetail_Contract].[DeletedDatabaseRecord] = 0 AND [InnerQuery_ContractDetail_ContractDetail].[ContractID] = [InnerQuery_ContractDetail_Contract].[ContractID] AND [InnerQuery_ContractDetail_ContractDetail].[RevID] = [InnerQuery_ContractDetail_Contract].[RevID] LEFT JOIN [ContractDetail] InnerQuery_ContractDetail_ContractDetailExt_ContractDetailExt ON [InnerQuery_ContractDetail_ContractDetailExt_ContractDetailExt].[ContractID] = [InnerQuery_ContractDetail_ContractDetail].[ContractID] AND [InnerQuery_ContractDetail_ContractDetailExt_ContractDetailExt].[LineNbr] = [InnerQuery_ContractDetail_ContractDetail].[LineNbr] AND [InnerQuery_ContractDetail_ContractDetailExt_ContractDetailExt].[RevID] = [InnerQuery_ContractDetail_Contract].[LastActiveRevID] AND [InnerQuery_ContractDetail_ContractDetailExt_ContractDetailExt].CompanyID = 3 ) ON [InnerQuery_Contract].[ContractID] = [InnerQuery_ContractDetail_ContractDetail].[ContractID] AND [InnerQuery_ContractItem].[ContractItemID] = [InnerQuery_ContractDetail_ContractDetail].[ContractItemID] AND [InnerQuery_ContractDetail_ContractDetail].CompanyID = 3 INNER JOIN [ContractItem] InnerQuery_ContractItem ON [InnerQuery_ContractItem].CompanyID = 3 AND [InventoryItem].[inventoryID] = [InnerQuery_ContractItem].[RecurringItemID] ) WHERE [InnerQuery_Contract].CompanyID IN (1, 3) AND 32 = SUBSTRING([InnerQuery_Contract].CompanyMask, 1, 1) & 32 AND [InnerQuery_Contract].[DeletedDatabaseRecord] = 0 AND [InnerQuery_Contract].[UsrLockDate] < @P0 AND (CASE WHEN ([InnerQuery_Contract].[BaseType] = 'T' OR [InnerQuery_Contract].[BaseType] = 'R') THEN CONVERT (BIT, 1) ELSE CONVERT (BIT, 0) END) = @P1 OPTION(OPTIMIZE FOR UNKNOWN) 函数而不是使用withRouter

导出容器
compose