Reactjs 如何在react router dom v4.3.1中正确断开到组件的路由

我希望将路由文件分解为多个组件，而不是

<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>

---

提前感谢您抽出时间，请告诉我您还需要提供哪些其他信息

您需要将顶级路由控制器组件（

HomepageRoutes

，

AdminRoutes

等）包装在

route

组件中，并在顶级交换机中使用

path

属性

还要注意的是，

开关

匹配与路径匹配的第一条

路线

（请参见），因此，如果您的第一条

路线

具有路径，而没有

精确

属性，它将始终匹配，因此您将无法到达任何其他

路线

。要处理此问题，您可以将

主页路由

的

路由

放在

开关

的末尾（但在

未找到

之前）

因此，您的

基本路由器应如下所示：

<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>


:

只要应用程序位置与路由路径匹配，就会呈现组件

我不相信
路由
或
开关
知道它是否嵌套

例如，如果您有位置
'/admin/welcome'
，但您的管理员
登录页面
只有
路径='/welcome'
，则
路径和应用程序位置不匹配，
登录页面
组件将不匹配。相反，
路径
应该是
'/admin/welcome'
谢谢Henry，不幸的是这对我不起作用。与之前的问题相同，我可以访问任何第一个“组件化”路由，在上面的示例中，所有主页路由都有效，但我仍然无法访问以下组件（管理或用户路由）中的任何路由。@LJ如果您按我之前的方式输入，我可以看到这是如何不起作用的：我没有使用
路径
属性。我做了一个编辑以包含它们。@LJ可能另一个问题是
路由
组件的顺序，所以我在回答中包含了处理。太好了，谢谢，我将尝试这种方法。关于这个问题，管理路由中的路径是否因此都需要以“/Admin”开头？或者只是捕获交换机的第一个包装器路由。admin中的许多路径都不包含该路径字符串。每个
路径中都需要包含完整路径（而不仅仅是父路径之后的部分）。我会把它添加到答案中，以备将来参考。
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="/" />

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>
)
}

    "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"

<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>