мои ссылки не работают в моем приложении реакции маршрутизатора

Question

Мои ссылки в следующем коде не работают.Я новичок, и я не уверен, где проблема.Есть ли у вас какие-либо советы, как их отладить?

Спасибо,

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

Раньше у меня был компонент, отвечающий за выборку моих элементов в БД и их загрузку.Это работало, но реорганизовано, чтобы включить извлечение как избыточное действие, и с тех пор оно больше не работает.

Пожалуйста, дайте мне знать, если у вас есть какие-либо советы.

Спасибо!

Answer 1

sn42 прав.Но я предпочитаю экспортировать контейнер с функцией withRouter вместо использования compose

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

Answer 2

Оберните подключенный компонент функцией 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);

Для получения дополнительной информации: с API роутера