Question

我试图通过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，孩子们仍然会被渲染。这是家庭组件：

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路由。但我宁愿不使用重定向而是在家里使用幻灯片没有路径。像这样：

<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，并且似乎遵循不同的模式。

Answer 1

我不确定我理解你的第一个问题，但这是第二个问题的答案，也许它会回答你们的问题。你需要使用IndexRoute设置一个＆＃34; home＆＃34;没有重定向的页面。使用如下配置：

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

现在当有人访问您的根网站时，他们会看到幻灯片内容（但它不会附加/滑动到网址）。

在这个例子中，我没有＆＃34; Home＆＃34;组件在任何地方，但既然你说你想要Home是幻灯片，请告诉我这是否适合你的需求。

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

1 个答案: