Как использовать маршруты в двух разных компонентах — ReactJS

Панель управления приложением

Я создаю приложение, используя ReactJS. Я использую реагирующий маршрутизатор v4 от react-router-dom.

Я написал маршруты в файле index.js.

<BrowserRouter>
<Switch>
    <Route exact path="/" component={Login} />
    <Route exact path='/dashboard' component={Viewport} />
</Switch>
</BrowserRouter>

Остальная часть приложения в файле Viewport.js.

    return (
        <div className="">
            <Sidebar navigation={this.viewport} />
            <HeaderBanner user={this.props.user} />
            <div className="center-panel">
                //todo
                //Can I use router here?
            </div>
        </div>
    )

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

Заранее спасибо.


reactjs javascript jsx react-router-dom react-router-v4
person Nandeesh    schedule 10.02.2018    source источник
comment
Конечно, вы можете использовать рут там. Проверьте документы Switch в react-router-dom.   -  person Akhil P    schedule 10.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

Недавно я следил за учебником на YouTube, который был очень полезным.

Так что я взял кое-что из этого и применил к вашей установке.

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route exact path='/dashboard' component={Viewport} />
  </div>
</BrowserRouter>


import { NavLink, Route } from 'react-router-dom';

class Viewport extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className="Side-bar">
          <NavLink
            activeClassName="active"
            to={`${this.props.match.url}/sub-page-name-1`}>Sub Page 1</NavLink>
          <NavLink
            activeClassName="active"
            to={`${this.props.match.url}/sub-page-name-2`}>Sub Page 2</NavLink>
          <NavLink
            activeClassName="active"
            to={`${this.props.match.url}/sub-page-name-3`}>Sub Page 3</NavLink>
        </div>
        <HeaderBanner user={this.props.user} />
        <div className="center-panel">
          <Route path={`${this.props.match.url}/sub-page-name-1`} component={SubPagePanel1} />
          <Route path={`${this.props.match.url}/sub-page-name-2`} component={SubPagePanel2} />
          <Route path={`${this.props.match.url}/sub-page-name-3`} component={SubPagePanel3} />
        </div>
      </div>
    )
  }
}

Я также удалил Switch, потому что не использовал его для своих подстраниц... :-S

Обновление: создан репозиторий с рабочим примером содержимого подстраницы.

https://github.com/PocketNinjaDesign/so-sub-routes-answer

person Pocketninja    schedule 10.02.2018
comment
Не могли бы вы поделиться ссылкой на видео на ютубе? Мне нужно больше узнать об этом! - person Nandeesh; 11.02.2018
comment
Это решение не сработало. Он отображает только этот конкретный компонент Route во всем окне браузера. - person Nandeesh; 11.02.2018
comment
@Nandeesh Добавил ссылку на репозиторий, показывающую пример React Router 4 с содержимым подстраницы, надеюсь, это ответит на ваш вопрос :-) - person Pocketninja; 11.02.2018
comment
@Nandeesh, как у тебя там дела. Это ответило на ваш вопрос? - person Pocketninja; 14.02.2018
comment
Я только что сделал, как вы упомянули. Я запустил сервер, и в вашем коде все работает нормально. Если я реализую то же самое в своем, я не получаю ссылку на this.props.match.url. Я просто жестко запрограммировал /dashboard/navigation-1, даже если это не работает. - person Nandeesh; 15.02.2018
comment
Есть ли что-то в начале, что может быть проблемой? Вы буквально копируете те же самые элементы блоков React Router, которые я создал, или у вас есть что-то другое...? - person Pocketninja; 18.02.2018

arrow_upward
0
arrow_downward

Да, вы можете использовать <Routes> в любом количестве мест. <Router> компоненты — это те, которые вы можете использовать только один раз.

person Femi Oni    schedule 10.02.2018