ReactJS Router не будет обновлять DOM при нажатии NavLink - PullRequest
Новая
       31

ReactJS Router не будет обновлять DOM при нажатии NavLink

0 голосов
/ 03 февраля 2019

Я создаю приложение, использующее реагирование js с реактивом (bootstrap4), и я хочу, чтобы основное содержимое страницы (которое является компонентом) менялось в зависимости от того, что происходит в панели навигации (Меню)

Я ожидаю, что DOM автоматически изменится после того, как я нажму на соответствующую <NavLink>

DOM не выполнит рендеринг сам, но после обновления он делает то, что должен (изменить данные в соответствии сURL-ссылка)

Я также заметил, что после нажатия на точки привязки с href="#" домен изменяет данные соответствующим образом.

Решение, которое я нашел до сих пор, состоит в том, чтобы включить jquery и иметь невидимую ссылкуна странице с href="#", которую я нажимаю onClick={() => }

Это также имеет проблему, так как <a> каким-то образом щелкают перед щелчком самого <NavLink>, поэтому, чтобы увидеть изменения DOMМне нужно дважды щелкнуть.

Ниже указана функция возврата компонента, которая возвращает панель навигации. 

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

Это полная реализация PM.MENU, который представляет собой список элементов для меню 

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

* <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>

Редактировать: (обновлено событие щелчка jquery);Теперь он работает, как и ожидалось, обновляет DOM, когда я нажимаю на NavLink (ОДИН РАЗ), однако я хочу решение, а не обходной путь:)). 

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

Редактировать: я также забыл упомянуть, чтоМоим первым решением было history.push (), но оно полностью обновляет страницу, и я не хочу, чтобы

...