当路由路径包含多个路径变量时，mapStateToProps不起作用

Question

我有一个与redux连接的react项目。我的问题是，当我在App.js中定义了一个路径路径时，它的URL参数不只是单个斜杠和变量（例如：'/ foo / bar'或'/ foo /：id'），我的组件无法从我的后端获取数据，但我收到404找不到。我怀疑它与mapStateToProps有关，但不确定。我在路径为'/ foo'时正确获取数据，并且能够控制台记录映射到props的数据的值，但是如果我在App.js路由路径中将该路径更改为'/ foo / bar'道具返回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);