CODEWITHSUNDEEP
javascriptreactjstypescriptreact-router
Dext1232
Dext1232

Reputation: 253

Unable to route via Navbar in React application

I have one React application where I have setup routes via the Navbar. Ideally it should switch but the routes are not switching. Am I missing something?

App.js:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import NavigationBar from './navigation/NavigationBar';
import { Routes } from './navigation/Routes';

export class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <NavigationBar />
                <Routes />
            </BrowserRouter>
        );
    }
}

export default App;

naviagtion/NavigationBar.js:

import React, { Component } from 'react';
import { Nav, Navbar, Form, FormControl, NavDropdown, Button } from 'react-bootstrap';

export default class NavigationBar extends Component {
    render() {
        return (
            <Navbar bg="light" variant="light">
            <Navbar.Brand href="/">KitchenSmart</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                    <Nav.Link href="/shop">Shop</Nav.Link>
                    <NavDropdown title="Sale" id="basic-nav-dropdown">
                        <NavDropdown.Item href="/sale">Winter Sale</NavDropdown.Item>
                        <NavDropdown.Item href="/sale">Summer Sale</NavDropdown.Item>
                        <NavDropdown.Item href="/sale">Spring Sale</NavDropdown.Item>
                    </NavDropdown>
               </Nav>
        </Navbar.Collapse>
        </Navbar>
    )
}
}

navigation/Routes.js:

import React from 'react';
import {Route, Switch} from 'react-router';
import Products from '../Products';
import Shop from '../Shop';
import Sale from '../Sale';
import Checkout from '../Checkout';
import Default from '../Default';

const Routes = () => (
    <Switch>
        <Route exact path="/" component={Products} />
        <Route path="/shop" component={Shop}></Route>
        <Route path="/sale" component={Sale}></Route>
        <Route path="/checkout" component={Checkout}></Route>
        <Route component={Default}></Route>
    </Switch>
 );

 export { Routes };

On the URL, the route is added, but the components are not changing. Am I missing something?

Upvotes: 0

Views: 275

Answers (2)

Furkan Karakuzu
Furkan Karakuzu

Reputation: 93

You have to use Link tag from react-router-dom in NavigationBar component i.e

<Link to="/">Home</Link>
<Link to="/shop">Shop</Link>

Upvotes: 1

Kevin Koech
Kevin Koech

Reputation: 78

Add prop exact={true} to all your Route components. i.e

<Switch>
    <Route exact path="/" component={Products} />
    <Route exact path="/shop" component={Shop}></Route>
    <Route exact path="/sale" component={Sale}></Route>
    <Route exact path="/checkout" component={Checkout}></Route>
    <Route exact component={Default}></Route>
</Switch>

Upvotes: 0

Related Questions