Why does React Router Change URL but doesn't Change the View

Question

I have created a react 16.8 application and am using react-router-dom. I built the Navigation Bar with React Semantic UI library. My Problem is that when I click the Menu Item Navlink the App changes the url however, it does not rerender the app with the new component that matches the path. I have tried various fixes to no avail. I have used Switch I have used Navlink, I have used withRouter. I tried to do a componentDidUnmount. When I refresh the app the component I am looking for does work. It just doesnt change when I click the navigation link. Here is my code. I am only asking because I have no other option and all the other answers are so outdated.

The App.js

import React from 'react';
import {BrowserRouter, Route, withRouter, Switch} from 'react-router-dom'
import Landing from './components/Landing/Landing'
import Sales from './components/Dashboard/Sales/Sales'
import Orders from './components/Dashboard/Orders/Orders'
import Returns from './components/Dashboard/Returns/Returns'
import DailySales from './components/Reports/Sales/DailySales/DailySales';

function App() {
  return (
    <BrowserRouter>
      <div className='App'>
        <Switch>
          <Route path="/" exact component={withRouter(Landing)} />
          <Route path="/dashboards/sales" exact component={withRouter(Sales)} />
          <Route path="/dashboards/orders" exact component={withRouter(Orders)} />
          <Route path="/dashboards/returns" component={withRouter(Returns)} />
          <Route path="/reports/dailysales/" component={withRouter(DailySales)} />
        </Switch>

      </div>
    </BrowserRouter>
  );
}

export default App;

And the Navigation component

import React from 'react'
import logo_icon from '../../../../assets/images/logo_icon.png'
import { Dropdown , Menu, Image } from 'semantic-ui-react'
import { BrowserRouter, Route ,Link, NavLink , withRouter ,Switch} from 'react-router-dom'
import Landing from '../../../Landing/Landing'
import Sales from '../../../Dashboard/Sales/Sales'

 const Navigation = () => (
<BrowserRouter>

        <Menu className="ui secondary">
        {/* Menu Icon */}
        <Link to="/dashboards/sales">
        <Dropdown.Item>   
        <Image className="item headLogo" src={logo_icon} />
        </Dropdown.Item>
        </Link>
        {/* End of Menu Icon */}
        {/* Here is Sales Dropdown */}
        <Dropdown className="ui dropdown item" text="Sales" icon="dropdown">
        <Dropdown.Menu>
            <Menu.Item className="item" as={ NavLink } exact to="/dashboards/sales" name="Dashboard" />  
            <Dropdown className="ui dropdown link item" text="Reports">
                <Dropdown.Menu>
                    <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/sales" name="Daily Sales"/>
                    <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/sales" name="Sales Summary"/>
                    <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/sales" name="Profit Margin"/>
                </Dropdown.Menu>
            </Dropdown>
        </Dropdown.Menu>
        </Dropdown>
        {/* End of Sales Dropdown */}
        {/* Here is Customer Service Dropdown */}
        <Dropdown className="ui dropdown item" text="Customer Service">
            <Dropdown.Menu>
                <Dropdown className="ui dropdown link item" text="Reports">
                    <Dropdown.Menu>
                        <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Service Level(Voice)"/>
                </Dropdown.Menu>
                </Dropdown>
            </Dropdown.Menu>
        </Dropdown>
        {/* End of Customer Service Dropdown */}
        {/* Here is Order Management Dropdown */}
        <Dropdown className="ui dropdown item" text="Order Management">
            <Dropdown.Menu>
            <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Dashboard"/>
            <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Fishbowl Anywhere"/>
            <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Search Orders"/>
            </Dropdown.Menu>
        </Dropdown>
        {/*End of Order Management Dropdown */}
        {/*Here is Inventory Management Dropdown */}
        <Dropdown className="ui dropdown item" text="Inventory Management">
            <Dropdown.Menu>
                <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="View Inventory"/>
                <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Monitor Inventory"/>
            </Dropdown.Menu>
        </Dropdown>
        {/*End of Inventory Management Dropdown */}
        {/*Here is Returns Dropdown */}
        <Dropdown className="ui dropdown item" text="Returns" icon="dropdown">
        <Dropdown.Menu>
            <Menu.Item className="item" as={ Link } to="/dashboards/orders" name="Dashboard" />
            <Menu.Item className="item" as={ Link } to="/dashboards/orders" name="Search Returns" />  
            <Dropdown className="ui dropdown link item" text="Reports">
                <Dropdown.Menu>
                    <Menu.Item className="ui dropdown link item" as={ Link } to="/dashboards/orders" name="Weekly Returns"/>
                </Dropdown.Menu>
            </Dropdown>
        </Dropdown.Menu>
        </Dropdown>
        {/*End of returns Dropdown */}
        </Menu>
</BrowserRouter>
)
export default withRouter(Navigation);

score 2 · Accepted Answer · answered Oct 16 '19 at 03:20

2

Try taking BrowserRouter off of your Navigation component

answered Oct 16 '19 at 03:20

tryonlinux

118
1
11

Why does React Router Change URL but doesn't Change the View

1 Answers1