Javascript 为什么React路由器会更改URL，但不会'；不要改变看法

我已经创建了一个react 16.8应用程序，正在使用react路由器dom。我用React语义UI库构建了导航栏。我的问题是，当我单击菜单项Navlink时，应用程序会更改url，但是，它不会使用与路径匹配的新组件重新启动应用程序。我尝试过各种修复方法，但都没有效果。我用过交换机，我用过Navlink，我用过路由器。我试着卸载组件。当我刷新应用程序时，我正在寻找的组件可以工作。当我点击导航链接时，它不会改变。这是我的密码。我只是问，因为我没有其他选择，所有其他答案都太过时了

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;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，withRouter，Switch}
从“./components/Landing/Landing”导入平台
从“./components/Dashboard/Sales/Sales”导入销售
从“./components/Dashboard/Orders/Orders”导入订单
从“./components/Dashboard/Returns/Returns”导入退货
从“./components/Reports/Sales/DailySales/DailySales”导入DailySales；
函数App（）{
返回(
);
}
导出默认应用程序；

和导航组件

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

从“React”导入React
从“../../../../assets/images/logo\u icon.png”导入logo\u图标
从“语义ui反应”导入{下拉菜单，菜单，图像}
从“react router dom”导入{BrowserRouter，Route，Link，NavLink，withRouter，Switch}
从“../../../Landing/Landing”导入着陆
从“../../../Dashboard/Sales/Sales”导入销售
常量导航=（）=>(
{/*菜单图标*/}
{/*菜单结束图标*/}
{/*这是销售下拉列表*/}
{/*销售结束下拉列表*/}
{/*这是客户服务下拉列表*/}
{/*客户服务结束下拉列表*/}
{/*这是订单管理下拉列表*/}
{/*订单结束管理下拉列表*/}
{/*这是库存管理下拉列表*/}
{/*结束库存管理下拉列表*/}
{/*这里是返回下拉列表*/}
{/*返回结束下拉列表*/}
)
使用路由器导出默认值（导航）；

尝试将BrowserRouter从导航组件上取下

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