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>

每个Route组件（例如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的{{1}}放在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>组件都必须包含 full 路径。因此，嵌套在Route中的Route的路径必须以AdminRoutes开始。来自documentation：

一旦应用位置与路线的路径匹配，就会呈现您的组件。

我不相信'/admin/'或Route知道它是否嵌套。

例如，如果您的位置为Switch，但您的管理员'/admin/welcome'仅具有LandingPage，则path='/welcome'和应用位置不匹配，而path组件不匹配。相反，LandingPage应该是path。

如何在react-router-dom v4.3.1

1 个答案: