React Router Dom Pathname продолжает вложение

Question

У меня есть приложение React, в котором параметры поиска включены в панель навигации и доступны в любом месте приложения. Всякий раз, когда пользователь выполняет поиск, а затем нажимает на один из продуктов, он должен отправить его в подробный вид этого продукта.

Проблема, с которой я сталкиваюсь, связана с маршрутизацией. Каждый раз, когда я ищу продукт и нажимаю на него в первый раз, он правильно перенаправляет, например, на http://localhost:3000/catalogue/women/sportive-shoes-sneakers/sneakers--low-top-sneaker/292487. Однако, если я попал в этот маршрут и попытался go отправить пользователя другому продукту, он сформулирует URL-адрес следующим образом: http://localhost:3000/catalogue/women/sportive-shoes-sneakers/sneakers--low-top-sneaker/catalogue/men/denim-pants/jeans/293140. Как видите, он вкладывает имена путей один за другим.

Мой код выглядит следующим образом:

this.state.displayProducts.map((product, index) => {
    return (
        <NavLink strict to={{
            pathname: `catalogue/${StringUtil.getUrlFromString(product.line)}/${StringUtil.getUrlFromString(product.familyName)}/${StringUtil.getUrlFromString(product.subfamilyName)}/${product.id[0] || product.id}`,
            selectedProduct: product
        }} key={index}>
            <div className="catalogue-productlist-product" onClick={this.props.wipeInput && this.props.wipeInput}>
                <img src={product.images && product.images[0] ? product.images[0].replace('{authorization}', this.props.token) : this.props.placeholder}
                    alt="Category" onError={this.imgError} />
                <div>
                    {product.productName}
                </div>
            </div>
        </NavLink>
    )
})

И мой маршрут выглядит так:

<Route
    exact path="/catalogue"
    render={(props) => (
        window.location.search.length > 0 ?
            <ProductList />
            :
            <Slider
                {...props}
                categories={this.props.categories}
            />
    )}
/>

<Route
    exact path={`/catalogue/search/:qs`}
    component={ProductList}
/>

<Route
    exact path={`/catalogue/:line/:family?/`}
    render={(props) => (
        <Slider
            {...props}
            categories={this.props.categories}
        />
    )} />

<Route
    exact path={`/catalogue/:line/:family/:subfamily`}
    component={ProductList} />

<Route
    exact path={`/catalogue/:line/:family/:subfamily/:product`}
    component={ProductDetail} />

Как бы один go об этом работал, как задумано? ie: независимо от текущего маршрута, пользователя всегда следует отправлять туда, куда его отправляет навигационная ссылка.

Answer 1

Проблема заключается в вашем пути, вы всегда должны добавить ведущий sla sh в ваши имена путей , например:

...
pathname: `/catalogue/${StringUtil.getUrlFromString(product.line)}/${StringUtil.getUrlFromString(product.familyName)}/${StringUtil.getUrlFromString(product.subfamilyName)}/${product.id[0] || product.id}`
...

Если вы не используете этот начальный sla sh в ссылочной навигации всегда будет добавлять путь, который вы указали, к предыдущему пути, который вы указали , поэтому ваш первый перенаправление будет красивым и аккуратным, а последующие будут добавлены к существующий путь, по которому вы сейчас находитесь.

ПРИМЕЧАНИЕ: Если вы всегда хотите изменить весь каталог с каждым выбранным продуктом, подумайте о добавлении ведущего имени sla sh в ваше имя пути, в противном случае вы следует использовать альтернативный способ.

Answer 2

Я думаю, я знаю, в чем проблема, я не уверен на 100%, но собираюсь go на конечности, потому что я сталкивался с подобными проблемами в прошлом, я думаю, вам нужно добавить '/' к значение пути до 'catalog'.

...
                                    return (
                                        <NavLink strict to={{
                                            pathname: `/catalogue/${StringUtil.getUrlFromString(product.line)}/${StringUtil.getUrlFromString(product.familyName)}/${StringUtil.getUrlFromString(product.subfamilyName)}/${product.id[0] || product.id}`,
...

Поскольку оно не имеет префикса '/', оно добавляет путь к текущему пути, а не начинает его с начала.