Question

我正在使用带有reactstrap（bootstrap4）的react js创建一个应用程序，我希望页面的主要内容（是组件）根据导航栏中的内容（菜单）进行更改

我希望在按下相应的href="#"

之后DOM自动更改

DOM不会重新呈现自身，但是在刷新后，DOM会执行应有的操作（根据url链接更改数据）

我还注意到，使用href="#"单击锚点时，dom会相应地更改数据。

到目前为止，我找到的解决方案是包括jquery并在页面上有一个onClick={() => }的不可见链接，我单击的是<a>

这也有一个问题，因为在单击<NavLink>本身之前以某种方式单击了<Navbar color="light" light expand="md"> <NavbarBrand href="#" className="mr-auto"> Santz </NavbarBrand> <NavbarToggler onClick={this.toggle} /> <Collapse isOpen={this.state.isOpen} navbar> <Router> <Switch> <Route path="/project_management" render={(props) => <PMMenu {...props} location={"/project_management"} />} /> </Switch> </Router> </Collapse> </Navbar>，所以要查看DOM更改，我必须单击两次。

下面是返回reactstrap导航栏的组件的return函数。

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { createBrowserHistory } from 'history';
import { Nav, NavItem, NavLink } from 'reactstrap';
import $ from 'jquery'

class PMMenu extends Component{
    render(){
        return (
            <Nav className="ml-auto" navbar>
                <NavItem>
                    <NavLink location={this.props.location} tag={Link} to="/project_management/table_view" onClick={() => $(' a.navbar-brand ')[0].click()}>Table view</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink location={this.props.location} tag={Link} to="/project_management/projects" onClick={() => $(' a.navbar-brand ')[0].click()}>Projects</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink location={this.props.location} tag={Link} to="/project_management/reports" onClick={() => $(' a.navbar-brand ')[0].click()}>Reports</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink location={this.props.location} tag={Link} to="/project_management/nonconformities" onClick={() => $(' a.navbar-brand ')[0].click()}>Nonconformities</NavLink>
                </NavItem>
            </Nav>
        )
    }
}

export default PMMenu

这是PMMENU的完整实现，这是菜单的项目列表

<MainContent />

<section> <Router> <Switch> <Route path="/project_management" component={Instructions} exact /> <Route path="/project_management/table_view" component={TableView} /> <Route path="/project_management/projects" component={ProjectView} /> <Route path="/project_management/reports" component={ReportView} /> <Route path="/project_management/nonconformities" component={NonconformityView} /> </Switch> </Router> </section>如下所示：

() => {
    setTimeout(
        () => {
            $(' a.navbar-brand ')[0].click()
        },
        10
    );
}

编辑：（更新了jquery click事件）；现在它可以按预期运行，当我单击NavLink（ONCE）时，它会更新DOM，但是我需要一种解决方案，而不是替代方法：））。

{{1}}

编辑：我也忘了提到我的第一个解决方案是history.push（），但这完全刷新了页面，我不想要那个

单击NavLink后，ReactJS Router不会更新DOM

0 个答案: