使用 react-router 和 IndexRoute 嵌套路由（反应路由器布局）

Posted 2023-03-10

【中文标题】使用 react-router 和 IndexRoute 嵌套路由（反应路由器布局）

【英文标题】：Nesting routes with react-router and IndexRoute (react router layouts)

【发布时间】：2016-11-12 16:29:33

【问题描述】：

我正在尝试使用 react-router 构建布局系统。如果我正确理解文档，则使用 IndexRoute 等于将路由嵌套在彼此之下。

但是在下面的代码中，当我使用 IndexRoute 时，子路由没有被嵌套。但是如果

当我用正确的标签 <Route><sub-route/></Route> 嵌套它们时，它会按预期工作：

//THIS WORKS
export default function(history) 
  return (
    <Router history=history>
        <Route component=App>
          <Route path="/" component=Home>
            <IndexRedirect to="slides"/>
            <Route path="slides" component=SlideShow/>        
            <Route path="posts" component=Posts/>
            <Route path="questions" component=Questions />
            <Route path="questions/:id" component=Question />
          </Route>
      </Route>       
    </Router>
  )


//DOSEN'T GET NESTED
export default function(history) 
  return (
    <Router history=history>
      <Route path="/" component=App>
        <IndexRoute component=Home/>
          <Route path="slides" component=SlideShow/>
          <Route path="posts" component=Posts />
          <Route path="questions" component=Questions />
          <Route path="questions/:id" component=Question />
        </Route>       
    </Router>
  )
 

为了说明这一点，如果我使用 IndexRoute 并从 home 组件中取出 this.props.children，子组件仍将被渲染。 这是 home 组件：

class Home extends Component
    render()
        //const SlideShow, Posts = this.props
        return(
            <div>
                <h1>HOME PAGE!</h1>
                <span><Link to="/slides">to slides</Link></span>
                <span><Link to="/posts">to posts</Link></span>
                <span><Link to="/questions">to question</Link></span>
                <div>this.props.children</div>
            </div>
            )

我的第二个问题是关于 IndexRedirect。如您所见，我使用它实质上将用户重定向到 /slides 路由。但我宁愿不使用重定向，而是使用 home 下的幻灯片 没有路径。像这样的：

<Router history=history>
        <Route component=App>
          <Route path="/" component=Home>
            <Route component=SlideShow/>        
            <Route path="posts" component=Posts/>
            <Route path="questions" component=Questions />
            <Route path="questions/:id" component=Question />
          </Route>
      </Route>       
    </Router>

这可能吗？

我正在努力实现以下目标： Using React-Router with a layout page or multiple components per page

只是我不太理解那里给出的示例，因为它不使用 IndexRoute 并且似乎遵循不同的模式。

【问题讨论】：

App 的 this.props.children 中默认为组件的IndexRoute，当你打开'/'时

对不起，我完全不明白你的评论

即home 组件会在 App 的 this.props.children 中，当你打开 '/'

我不明白你是说这是默认的吗？那么我该如何使用IndexRoute呢？

IndexRoute 用于此

【参考方案1】：

我不确定我是否理解您的第一个问题，但这是您第二个问题的答案，也许它会同时回答这两个问题。您需要使用 IndexRoute 设置“主页”页面而不进行重定向。使用这样的配置：

<Router history=history>  
  <Route path="/" component=App>
    <IndexRoute component=SlideShow />
    <Route path="posts" component=Posts/>
    <Route path="questions" component=Questions/>
    <Route path="questions/:id" component=Question/>
  </Route>
</Router>

现在当有人访问您的根站点时，他们将看到幻灯片内容（但不会将 /slides 附加到 url）。

在这个例子中，我在任何地方都没有“Home”组件，但是既然你说你希望 Home 是幻灯片，如果这不符合你的需要，请告诉我。