Saya memiliki aplikasi Bereaksi di mana opsi pencarian disertakan di navbar, dan dapat diakses di mana saja di aplikasi. Setiap kali pengguna mencari dan kemudian mengklik salah satu produk yang ditampilkan, itu harus mengirim mereka ke tampilan detail produk itu.

Masalah yang saya hadapi adalah dengan perutean. Setiap kali saya menelusuri dan mengeklik produk untuk pertama kalinya, produk itu dialihkan dengan benar ke, sebagai contoh, http://localhost:3000/catalogue/women/sportive-shoes-sneakers/sneakers--low-top-sneaker/292487. Namun, jika setelah saya berada di rute itu saya mencoba untuk mengirim pengguna ke produk lain, itu merumuskan url seperti ini: http://localhost:3000/catalogue/women/sportive-shoes-sneakers/sneakers--low-top-sneaker/catalogue/men/denim-pants/jeans/293140. Seperti yang Anda lihat, itu menyarangkan nama path satu demi satu.

Kode saya terlihat seperti ini:

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

Dan Rute saya seperti ini:

<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} />

Bagaimana cara membuatnya bekerja sebagaimana dimaksud? yaitu: tidak peduli rute saat ini, pengguna harus selalu dikirim ke mana pun navlink mengirimnya.

0
KuluGary 27 April 2020, 12:32

2 jawaban

Jawaban Terbaik

Masalahnya terletak di sini di nama jalur Anda, Anda harus selalu mempertimbangkan untuk menambahkan garis miring di nama jalur Anda seperti ini:

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

Jika Anda tidak menggunakan garis miring ini di navigasi tautan itu akan selalu menambahkan jalur yang Anda berikan ke jalur sebelumnya yang Anda berikan, jadi ini akan membuat pengalihan pertama Anda bagus dan rapi kemudian yang berikutnya akan ditambahkan ke jalur yang ada di mana Anda berada sekarang.

CATATAN: Jika Anda selalu ingin mengubah seluruh direktori dengan setiap produk yang dipilih, pertimbangkan untuk menambahkan garis miring di nama path Anda, jika tidak, Anda harus menggunakan cara alternatif.

3
SMAKSS 4 Mei 2020, 10:26

Saya pikir saya tahu apa masalahnya, saya tidak 100% yakin tetapi akan mengambil risiko, karena saya telah mengalami masalah serupa di masa lalu, saya pikir Anda perlu menambahkan '/' ke nilai pathname sebelum 'katalog'.

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

Karena tidak diawali dengan '/', ini menambahkan jalur ke jalur saat ini daripada memulainya dari awal.

0
Armaan Bindra 27 April 2020, 09:51