How to redirect to URL in react without reloading entire Page

Question

If I am using window.location.href but it is giving me page reloading experience. How can i prevent reloading and redirect to new URL(path from navigate to URL)

function App(){

useEffect(()={retreiveCategoryLis();})

const retreiveCategoryLis= ()={//axios call to get the category List}

 const navigateToURL = (category) =>
    {
        const path = 'http://localhost:4200/Categories?categoryName='+category;
        alert(path);
        //window.location.href=path
        
    }

 return(
    <div className="categoriesContainer">
        {categoryList && categoryList.map((category) => (
            <div key={Math.random()} className='categoryItem' onClick={()=> navigateToURL(category)}>
            <img key={Math.random()} src={getCategoryImage(category)} alt=""></img>
            <p key={Math.random()}> {category}</p>
        </div>
        )
        )}
    </div>
}

You can use libraries like Wouter or React-router-dom.

ivanatias
– ivanatias

2022-08-02 23:38:49 +00:00
Commented Aug 2, 2022 at 23:38 — ivanatias
– ivanatias, Commented Aug 2, 2022 at 23:38

remonke · Accepted Answer · 2022-08-02 23:17:03Z

2

ok since you use react, you can use a library that called react-router-dom.

answered Aug 2, 2022 at 23:17

remonke

3864 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to redirect to URL in react without reloading entire Page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related