mapStateToProps не работает, когда путь к маршруту содержит несколько переменных пути

Question

У меня есть реактивный проект, связанный с редуксом.Моя проблема заключается в том, что когда в моем App.js определен путь Route с любым параметром url, отличным от одной косой черты и переменной (например: / foo / bar 'OR' / foo /: id '), мой компонент не можетполучить данные из моего бэкэнда, и я получаю 404 не найден.Я подозреваю, что это как-то связано с mapStateToProps, но я не уверен.Я правильно выбираю данные, когда путь - «/ foo», и могу консоль записывать в журнал значения данных, которые сопоставлены с реквизитами, но если я изменю этот путь на «/ foo / bar» в App.js Route pathреквизит возвращается 404. Я не уверен, как это исправить.

App.js

render() {
        return (
            <Provider store={store}>
                <BrowserRouter>
                <HeaderNav />
                    <Route exact path="/" component={Home} />

                    // path won't mapStateToProps properly
                    <Route path="/collection/:type"
                        render={(props) => <Collection {...props} />} 
                    />
                <Footer />
                </BrowserRouter>
            </Provider>
        );
    };

Collection.js

class Collection extends Component {
    constructor(props) {
        super(props);

    };

    componentDidMount() {
        this.props.fetchCollection("Tents");
    }

    render() {
        console.log(this.props.collection) // returns 404

        let collection;

        if(this.props.collection.Tents) {
            collection = this.props.collection.Tents.map(product => {
                return (
                    <div key={product.item_number} className="container-product">
                        <img src={product.image_url} alt="product"/>
                        <h1>{product.title}</h1>
                        <h2>${product.price}</h2>
                        <p>{product.rating}</p>
                    </div>
                );
            });
        }


        return (
            <div>
                <div id="container-all-products">

                        {collection}

                </div>

            </div>
        );
    };

};

const mapStateToProps = state => ({
    collection: state.products.collections
});

export default connect(mapStateToProps, { fetchCollection })(Collection);