URL-адрес редуктора маршрутизатора

Я делаю свое первое веб-приложение, используя react, react router v4 и redux/react-router-redux.

это торговый сайт. У меня есть список моих продуктов, сохраненных в магазине, и я могу получить к ним доступ. Я создал страницу со списком продуктов, при нажатии на изображение продуктов у меня есть настройка маршрутизации, чтобы перейти к новому URL-адресу (/ 'productmodel').

В настоящее время у меня есть компонент «ProductPage», для которого я передал реквизиты, относящиеся к конкретному продукту, для каждого соответствующего маршрута в моем маршрутизаторе. Кажется, что это очень долгий путь.

Что я хотел бы сделать, так это визуализировать для каждого из маршрутов, а затем сам компонент ProductPage отображать правильный продукт в зависимости от маршрута (URL-адреса).

Как лучше всего это сделать??

Заранее спасибо :)


reactjs redux react-router-v4 browser-history
person Gurtaj    schedule 06.08.2017    source источник
comment
Да благословит вас Бог, используя эти библиотеки. Пожалуйста, подумайте, действительно ли вам нужно redux вместе с react-router. В SPA иногда достаточно только react-router. Просто подумайте об использовании redux, когда он вам действительно понадобится, а не потому, что кто-то говорит вам, что это хорошо.   -  person haotang    schedule 07.08.2017
comment
Привет, хаотан, спасибо за поддержку. Я использовал редукцию, потому что на моей странице со списком продуктов у меня есть фильтры, которые позволяют мне фильтровать по бренду, ценовому диапазону и т. д. Редукс казался лучшим способом для этого, и теперь, когда я его использую, это кажется отличным способом.   -  person Gurtaj    schedule 07.08.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы после чего-то вроде этого?

ПродуктыСписокСтраница:

....

render() {
   <div>
       {this.props.products.map(product => 
           <Link key={product.id} to={"/product/"+product.id}>
               {product.name}
           </Link>
       )}
   </div> 
}

....

Страница продукта:

....

componentWillMount() {
    this.props.actions.getProduct(this.props.match.params.productid);
}

....

render() {
   <div>
       <span>{this.props.product.name}</Link>
   </div> 
}
....

Ваш маршрут для страницы продукта будет выглядеть так:

<Route exact path="product/:productid" component={ProductPage} />

Итак, что здесь происходит, когда вы нажимаете на продукт на странице списка продуктов, вы перенаправляетесь на страницу продукта, которая имеет идентификатор продукта в качестве параметра. При монтировании компонента на странице продукта вы получаете продукт, передавая идентификатор продукта из параметров (url).

person Hossein    schedule 07.08.2017
comment
Вау, спасибо, Хоссейн, похоже, это отличный способ сделать это. и не требует от меня подключения моей истории к моему магазину избыточности. Я собираюсь попробовать и вернуться к этому посту, как только я закончу! - person Gurtaj; 07.08.2017
comment
хорошо, так что это не работает так легко для меня. Я не могу использовать функцию getProduct. то, что я хочу сделать, это получить продукт, который относится к пути маршрута, из моего редуктора продукта (список продуктов). Затем я хочу отобразить только этот продукт. Я вижу, что могу получить доступ к параметрам из своего компонента, но я все еще не могу понять, как указать моему компоненту использовать только тот продукт, который соответствует параметрам. не поможет ли мне в этом использование connectRouter и routerReducer? - person Gurtaj; 07.08.2017

arrow_upward
0
arrow_downward

хорошо, так что я успеваю это сделать!

Я создал ProductPageContainer, чтобы передать список товаров из магазина:

function mapStateToProps(state) {
    let products = state.kitsProducts;
    return {
    products: products
    };
};

Затем я в своем компоненте получил идентификатор продукта из параметров; как предложил Хоссейн:

createProductPageComponent() {
    let activeProduct = this.props.products.filter(product => product.id === this.props.match.params.productid)
    return activeProduct.map(product =>{
        return (
            <ProductPage
                key={product.id}
                brand={product.brand}
                productName={product.model.toUpperCase()}
                price={"£"+product.price}
                productImage={product.image}
                text={product.text}
            />
        )
    })
}

и теперь моя страница продукта отображается по правильному маршруту, в зависимости от того, какой продукт был выбран на предыдущей странице списка продуктов. И правильный продукт, в зависимости от того, на каком маршруте он был обработан.

Спасибо Хосейн!!! Вы помогли мне больше, чем вы думаете!

person Gurtaj    schedule 07.08.2017