CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Devang Joshi
Devang Joshi

Reputation: 99

Routing To another page is not happening without refreshing after clicking on the link in React

I have one Navbar in React with the following code

import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Header from './components/header/Header';
import Home from './components/home/Home';
import About from './components/about/About';
import Accessories from './components/accessories/Accessories';
import Category1 from './components/accessories/categories/Category1';
import Category2 from './components/accessories/categories/Category2';
import Category3 from './components/accessories/categories/Category3';
import Category4 from './components/accessories/categories/Category4';
import Contact from './components/contact/Contact';
import Footer from './components/footer/Footer';

const App = () => {
    return (
        <div className="App">
            <Header />
            <Router>
                <Switch>
                    <Route exact path="/">
                        <Home />
                        <About />
                        <Accessories />
                        <Contact />
                    </Route>
                    <Route exact path="/category1">
                        <Category1 />
                    </Route>
                    <Route exact path="/category2">
                        <Category2 />
                    </Route>
                    <Route exact path="/category3">
                        <Category3 />
                    </Route>
                    <Route exact path="/category4">
                        <Category4 />
                    </Route>
                </Switch>
            </Router>
            <Footer />
        </div>
    );
}

export default App;

I can go smoothly from / to /category1, but when I reroute to / from /category1, no rerendering is happening until I refresh the page. I have no idea what to do now. Thank you for any help in advance

Edited: I just changes all my Links to anchor tags and now they are working but is it a good practice?

Upvotes: 0

Views: 752

Answers (2)

Tech Helper
Tech Helper

Reputation: 51

You have to use the element to redirect to other routes. In "/category1", you can use the element to redirect "/" without reloading the page.

Upvotes: 0

Gautam Kothari
Gautam Kothari

Reputation: 321

                    <Route exact path="/">
                        <Home />
                        <About />
                        <Accessories />
                        <Contact />
                    </Route>

Put the above code after all the routes are being defined and it should work

          <Switch>
            <Route exact path="/category1">
                <Category1 />
            </Route>
            <Route exact path="/category2">
                <Category2 />
            </Route>
            <Route exact path="/category3">
                <Category3 />
            </Route>
            <Route exact path="/category4">
                <Category4 />
            </Route>
            <Route exact path="/">
                <Home />
                <About />
                <Accessories />
                <Contact />
            </Route>
        </Switch>

The '/' path should be defined at the last after all the paths have been defined

Upvotes: 1

Related Questions