为啥 React Router 更改 URL 但不更改视图

Posted 2023-02-22

【中文标题】为啥 React Router 更改 URL 但不更改视图

【英文标题】：Why does React Router Change URL but doesn't Change the View为什么 React Router 更改 URL 但不更改视图

【发布时间】：2020-02-12 17:47:23

【问题描述】：

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

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

【参考方案1】：

尝试从导航组件中移除 BrowserRouter