Реагировать на изменение URL-адресов маршрутов. но не отображает компоненты. при обновлении страницы отображается идеально

Это известная проблема маршрутизации реагирования. но у меня нет решения за последние две недели. это большая проблема, и я надеюсь, что любой ответ на это сердечно. У меня есть три компонента, такие как Admin.js, AdminReview.js и AdminDashboard.js, как показано ниже.

Вот мой файл index.js.

index.js

<Provider store={store}>
    <BrowserRouter basename="/">
        <App/>
    </BrowserRouter>
</Provider>

Файл Admin.js находится в файле App.js, там есть Admin.js и у него есть маршрутизация.

Admin.js

return(
        <div>
            <BackdropLoading show={this.props.result} />
            <Switch>
                <Route path="/interactions" component={AdminReview} />
                <Route path="/" exact component={AdminDashbord} />
            </Switch>
        </div>
    )

Я использовал redux в моем файле Admin.js, как показано ниже.

export default connect(mapStateToProps, mapDispatchToProps)( Admin);

AdminReview.js и AdminDashboard.js - это обычные файлы, но используются redux, как показано ниже.

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminReview));

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminDashbord));

withRouter - это компонент более высокого порядка, и он импортирует с помощью

реагировать-маршрутизатор-дом

для предотвращения обновления блока согласно документации по реакции.

Я использовал навигационную панель для перехода к указанным выше маршрутам. Это мой файл AdminNavbar.js.

AdminNavbar.js

<form className="form-inline my-2 my-lg-0">
                        <ul className="navbar-nav" style={{float: 'right',marginBottom:'-10px'}}>


                            <li id="reviewId" className="nav-item" style={liStyle}>
                                <Link to="/interactions" onClick={this.reviewClick}
                                   className="nav-link js-scroll-trigger"
                                   style={linkStyle}>
                                    <small>Interactions</small>
                                </Link>
                            </li>



                            &nbsp;&nbsp;&nbsp;

                            <li id="reportId" className="nav-item"
                                style={{cursor: 'pointer', float: 'right', borderBottom: '1px solid transparent'}}>


                                <Link to="/report" onClick={this.reportClick}
                                   className="nav-link js-scroll-trigger"
                                      style={linkStyle}>
                                    <small>Reports</small>
                                </Link>
                            </li>


                            &nbsp;&nbsp;&nbsp;

                            <li className="nav-item"
                                style={{cursor: 'pointer', float: 'right', paddingTop: '7px'}}>
                                <img src={dollerIcon} alt="icon" style={{width:'20px'}}/>
                                &nbsp;&nbsp;&nbsp;
                            </li>




                            <li id="dashbordId" className="nav-item" style={{
                                cursor: 'pointer',
                                float: 'right',
                                borderBottom: '1px solid transparent',
                                paddingTop: '2%'
                            }}>
                                <ProfileDropdown user="admin"/>

                            </li>


                        </ul>


                    </form>

AdminNavbar также использовал сокращение, как показано ниже.

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AdminNavbar));

В настоящее время я читаю больше статей, связанных с этим, но я не могу исправить эту проблему. пожалуйста, кто-нибудь может помочь решить это?


reactjs javascript react-redux react-router
person Vidurajith Darshana    schedule 02.08.2018    source источник
comment
Это руководство содержит ответы, которые вы ищете: github.com/ReactTraining/react-router/blob/master/packages/   -  person Praveen Rao Chavan.G    schedule 02.08.2018
comment
@ PraveenRaoChavan.G Я изучил это руководство. и я использую withRouter hoc для предотвращения блокировки. но я не вижу изменений? вы можете дать мне другое решение?   -  person Vidurajith Darshana    schedule 02.08.2018
comment
@ShubhamAgarwalBhewanewala Я сделал это, но проблема та же!   -  person Vidurajith Darshana    schedule 02.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

После долгих испытаний мы с другом наконец нашли решение этой проблемы. Если мы говорим о нашей компонентной структуре, то это как показано ниже.

index.js

<Provider store={store}>
<BrowserRouter basename="/">
    <App/>
</BrowserRouter>

App.js

<div>
    <MainLayout/>
</div>

MainLayout.js

<div>
    <AdminLayout/>
</div>

AdminLayout.js

<div>
        <BackdropLoading show={this.props.result} />
        <Switch>
            <Route path="/interactions" component={AdminReview} />
            <Route path="/" exact component={AdminDashbord} />
        </Switch>
    </div>

i use the connect of react redux in MainLayout.js,AdminLayout.js and AdminReview.js and AdminDashboard.js so i wrapped those with withRouter hoc of

реагировать-маршрутизатор-дом

это было не правильно. мы должны обернуть только используемые компоненты маршрута. например AdminLayout.js. но есть проблема, потому что дочерние компоненты не должны получать реквизиты, потому что MainLayout.js также использует соединение. так что, наконец, я также обернул MainLayout.js из withRouter. теперь я обернул два компонента из withRouter, такие как AdminLayout.js и MainLayout.js. тогда маршрутизация работает отлично.

person Vidurajith Darshana    schedule 06.08.2018