React Маршрутизатор: Route определено в детской компонент не работает

голоса
0

В главном компоненте я использовать переключатель

function Router(props) {

    return (<main>
        <Switch>
            <Route exact path='/prices/'
                   render={(props) => <PricesPage {...props} />}
            />
            <Route path=/prices/add/
                   render={(props) => <PriceGroupAddFormConnected {...props}/>}
            />
        </Switch>
    </main>) 
}

И в одном из PricesPage детей я определить маршрут, чтобы сделать диалог

PricesPage:

function PricesPage(props) {

    return (<Child/>) 
}

Ребенок:

function Child(props) {

    return (
            <><Route exact path=/prices/dialog component={Dialog}/>
            <Child1/></>)
        )

}

И в ребенка1 я определить ссылку.

Child1:

function Child1(props) {

    return (
            <Link to=/prices/dialog/>)
        )

}

Ожидаемое: когда ссылка изменилась -> открывается диалоговое окно

Ток: ссылка изменилось, но диалог открытия is'not. Но тогда я определить маршрут основного компонента, он работает, но мне нужно, чтобы другие дети компонентов под диалогом, так что это не достаточно

Задан 09/10/2019 в 12:57
источник пользователем
На других языках...                            


1 ответов

голоса
0

Когда вы нажмете /prices/, ваш маршрут /prices/dialogбудет создан , потому что это в дочернем компоненте <PricesPage>. Но, когда вы идете /prices/dialog, ваш маршрут /prices/dialogявляется разгрузить , потому что /prices/dialogне соответствуют точно /prices/ни чем /prices/add/.

У вас есть 2 варианта:

  1. Удалить exactключ на <Route path='/prices/' render={(props) => <PricesPage {...props} />}. Так что, когда вы нажмете /prices/dialog, вы будете иметь оба /prices/компонент и /prices/dialogвынесенный компонент (такой же для /prices/add/)
  2. Добавьте свой маршрут /prices/dialogв сторону маршрутизатора ваши другие маршруты /prices/и/prices/add/

Я рекомендую 2-ую, если вам нужно отдельные визуализации и 1-й, если вы можете иметь несколько рендеринг одновременно.

Ответил 10/10/2019 в 11:14
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more