react.js - React 的这个案例该怎么设计路由？

问题描述

问 题

最近看了下 React，准备把学习 Vue 时的这个练手项目（https://github.com/hanzichi/v...）用 React 实现一遍，但是在设计路由的时候碰到了问题。

期望的效果图如下：

最外层包括三个组件 Top，Middle 以及 Bottom，而路由变化时真实渲染的地方是 Middle 的左部分。

用 Vue 的话，我直接把 <router-view></router-view> 写在了 Middle.vue 文件中：

<template>
  <div class="box">
    <!-- 根据路由渲染的部分 -->
    <div class="left">
      <router-view></router-view>
    </div>
    <right class="right"></right>
  </div>
</template>

路由匹配的时候应该会自动去找，但是 React 的话，没有 <router-view> 这样的标签去定位，是怎么能确定路由渲染的区域的？

App.js：

import Top from './Top'
import Middle from './Middle'
import Bottom from './Bottom'

class App extends Component {
  render() {
    return (
     <div id ="app">
       <Top/>
       <Middle/>
       <Bottom/>
     </div>
    );
  }
}

export default App;

路由配置：

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/register" component={Register} />
      <Route path="/login" component={Login} />
      <Route path="/detail/:id" component={Detail} />
    </Route>
  </Router>
  ), document.getElementById('root')
);

是不是我的整体思路错了，React 不能像 Vue 一样去这样搞？

谢谢

解决方案

不是很肯定。。。没来得及试，不过应该没问题。。。

class App extends Component {
  render() {
    return (
     <div id ="app">
       <Top/>
       {this.props.children}
       <Bottom/>
     </div>
    );
  }
}

这篇关于react.js - React 的这个案例该怎么设计路由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！