Question

我创建了一个react 16.8应用程序，并且正在使用react-router-dom。我用React Semantic UI库构建了导航栏。我的问题是，当我单击菜单项导航链接时，应用程序更改了URL，但是它没有使用与路径匹配的新组件重新渲染应用程序。我尝试了各种修复措施都无济于事。我用过Switch我用过Navlink，我用过Router。我试图做一个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);

Answer 1

尝试从浏览器组件中删除BrowserRouter

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

1 个答案: