Блог

Главная - Вопросы по программированию - Реагировать на условный рендеринг компонента в определенных маршрутах

Реагировать на условный рендеринг компонента в определенных маршрутах

#javascript #reactjs #redux

#javascript #reactjs #сокращение

Вопрос:

Это мой Index.js

 ReactDOM.render(
   <React.StrictMode>
        <Provider store={store}>
            <Router>
               <App className="app-main" />
            </Router>
         </Provider>
    </React.StrictMode>,
  document.getElementById('root')
);

И вот App.jsx

 <Switch>
     appRoutes.map(route =>
          <Route path={route.path} component={route.component} key={route.key}/>
     )}
</Switch>
<BottomNav />

Я хочу отобразить компонент BottomNav в определенных маршрутах, в которых они также являются некоторыми вспомогательными маршрутами. Я использовал withRouter в нижней навигации, но его соответствие — это просто «/», и у меня есть доступ только к местоположению. Для меня недостаточно местоположения, потому что, как я уже сказал, в этих маршрутах есть несколько дополнительных маршрутов. Так, например, в маршруте профиля у меня есть действия и друзья. я хочу отобразить BottomNav в профиле / друзьях, но не в профиле / действиях, как я могу этого добиться. Мое решение состояло в том, чтобы установить текущий путь маршрута в redux и передать его в bottom nav и проверить, есть ли он в допустимых маршрутах. я отображаю bottom nav, но я не могу писать и повторять функцию в течение определенного времени в разных представлениях, когда они монтируют обновление текущего маршрута в redux. Я забыл сказать, что я новичок в React, пожалуйста, будьте осторожны и подробно объясните tnx 🙂

Комментарии:

1. Почему бы вам просто не добавить компонент BottomNav на нужные вам экраны? Должен ли он быть выше в дереве?

2. я пробовал это, но это навигационный компонент и имеет анимацию, если эта страница соответствует навигационным ссылкам. поэтому, если страница изменяет анимацию, прерывается. 🙁

3. Хорошо 🙂 Тогда я попробую предложить

Ответ №1:

Я не тестировал его, просто вывел его из головы. Идея заключается в том, что вы создаете карту маршрутов, на которых должен отображаться ваш BottomNav. В противном случае просто верните null .

 import {withRouter} from 'react-router-dom'

const ROUTES_WITH_BOTTOM_NAV = {
   '/home': true,
   '/profile/friends': true
}

const BottomNav = (props) => {
   const currentPage = props.location.pathname;
   if (!ROUTES_WITH_BOTTOM_NAV[currentPage]) return null;

   return (...yourBottomNavJsx)
}

export const withRouter(BottomNav)

Дайте мне знать, если это помогло.