Как правильно разделить маршрутизацию к компонентам в response-router-dom v4.3.1

Question

Я хочу разбить мой файл маршрутизации на компоненты, чтобы вместо

<BrowserRouter basename="/recruiter" >
        <div>
          <Nav />
          <Switch>
            /* HOMEPAGE ROUTES */
            <Route exact path="/" component={Home} />
            <Route exact path="/how-and-why" component={Pdf} />
            <Route path="/sign-in" component={SignIn} />
            <Route path="/investor-sign-in" component={SignIn} />
            <Route exact path="/sign-in-error" component={SignInError} /> 
            /* ADMIN ROUTES */
          {this.props.AdminUser ?
            <Route exact path="/welcome" component={LandingPage} />
            <Route exact path="/companies" component={CompaniesTable} />
            <Route exact path="/:companyId/edit-success" component={EditSuccess} />
            <Route exact path="/:companyId" component={SingleCompanyTable} />
            <Route exact path="/:companyId/:formId" component={SingleCompanyEdit} /> 
            ...10+ more Admin routes
            : <Redirect to="/" />
           }
          /*USER ROUTES */
           {this.props.regularUser ? 
              ...additoinal User routes 
             : null
            }
         </Switch>
      </div>
  </BrowserRouter>

Это

<BrowserRouter basename="/recruiter" >
        <div>
          <Nav />
          <Switch>
            <Homepage Routes />
            <AdminRoutes adminUser={this.props.adminUser} />
            <UserRoutes regularUser={this.props.regularUser} />
             //catch all
            <Route component={NotFound} />
    </Switch>
  </BrowserRouter>

Каждый компонент маршрута (например, AdminRoutes) выглядит как

export const AdminRoutes = (props) => {

  return props.adminUser ?
    <div>
       <Route exact path="/welcome" component={LandingPage} />
        <Route exact path="/companies" component={CompaniesTable} />
        <Route exact path="/:companyId/edit-success" component={EditSuccess} />
        <Route exact path="/:companyId" component={SingleCompanyTable} />
        <Route exact path="/:companyId/:formId" component={SingleCompanyEdit} /> 
        ...10+ more routes
    </div>
     : <Redirect to="/" />

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

У меня ранее это работало, оборачивая подкомпоненты в коммутаторы, но затем все маршруты / компоненты перехвата (что является моим 404 не найденным) отображаются все время из-за контекстного изменения местоположения между внешним и внутренним коммутаторами.

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

е

const subRoute = () => {
  return (
    <Route path="/admin >
       /* this should work? */
      <Route path=/admin/:profile component={AdminProfile} />
      /*doesn't work? */
     <Route path="/add-company" component={AddCompany} />
   </Route>
)
}

Я хотел бы избежать этого, если это возможно, поэтому мне не нужно переписывать все мои маршруты, которые я хотел бы, чтобы "component-ize"

Соответствующая информация package.json:

    "react": "^16.4.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.2",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.6",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.3.1",
    "react-test-renderer": "^16.4.2",
    "redux": "^3.7.2",
    "redux-form": "^7.3.0",
    "redux-thunk": "^2.2.0"

Заранее благодарим вас за ваше время и, пожалуйста, дайте мне знать, какую другую информацию предоставить.

Answer 1

Вам необходимо обернуть компоненты контроллера маршрутов верхнего уровня (HomepageRoutes, AdminRoutes и т. Д.) В компоненты Route с атрибутами path в переключателе верхнего уровня.

Также обратите внимание, что Switch соответствует first Route, который соответствует пути (см. docs ), поэтому, если ваш первый Route имеет путь '/' без атрибут exact, он всегда будет совпадать, поэтому вы не получите ничего другого Route. Чтобы справиться с этим, вы можете поставить Route для HomepageRoutes в конце Switch (но до NotFound).

Итак, ваш BaseRouter должен выглядеть так:

<BrowserRouter basename="/recruiter" >
    <div>
      <Nav />
      <Switch>
        <Route path='/admin' render={ () => <AdminRoutes adminUser={this.props.adminUser}/> }/>
        <Route path='/users' render={ () => <UserRoutes regularUser={this.props.regularUser}/> }/>
        <Route path='/' component={ HomepageRoutes } />
         //catch all
        <Route component={NotFound} />
</Switch>

Обратите внимание, что любые вложенные компоненты Route должны содержать путь full . Таким образом, пути Route, вложенные, скажем, в AdminRoutes, должны начинаться с '/admin/'. Из документации :

Как только местоположение приложения совпадет с путем маршрута, ваш компонент будет визуализирован.

И я не верю, что Route или Switch знает, является ли он вложенным.

Например, если у вас есть местоположение '/admin/welcome', но у вашего администратора LandingPage есть только path='/welcome', path и местоположение приложения не совпадают, а компонент LandingPage не будет совпадать. Вместо этого path должно быть '/admin/welcome'.