为什么 React Router 改变 URL 但不改变视图

Question

我已经创建了一个 React 16.8 应用程序并且正在使用 react-router-dom。我用 React Semantic UI 库构建了导航栏。我的问题是，当我单击菜单项 Navlink 时，应用程序会更改 url 但是，它不会使用与路径匹配的新组件重新呈现应用程序。我尝试了各种修复都无济于事。我用过Switch我用过Navlink，我用过withRouter。我试着做一个 componentDidUnmount。当我刷新应用程序时，我正在寻找的组件确实有效。当我点击导航 link 时它并没有改变。这是我的代码。我只是问，因为我别无选择，所有其他答案都太过时了。

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;

以及导航组件

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

Answer 1

尝试从导航组件中移除 BrowserRouter

为什么 React Router 改变 URL 但不改变视图

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

javascript

jsx

reactjs

semantic-ui-react

react-router-dom