React JS 路由无法正常工作答案

【问题标题】：React JS route doesn't work properlyReact JS 路由无法正常工作
【发布时间】：2016-11-30 15:45:15
【问题描述】：

我的/ 路由没有正确渲染我的主要组件。

这是我的代码：

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" componenet={Main}>
            <IndexRoute component={Index}></IndexRoute>
            <Route path="portfolio" component={Portfolio}></Route>
        </Route>
    </Router>,
    document.getElementById('app')
);

这是我的主要组件：

export default class Main extends React.Component {     
    render() {
        console.log("asdfasfsaf");
        return(
        <div>
            <h1> This is Main Page </h1>
            {this.props.children}
        </div>
        )
    }

}

一旦我加载了这个网站，它就会转到我的Index 组件。但是它不会渲染出Main.js 的<h1> This is Main Page </h1>。然后我将Main.js 中的所有代码全部擦除，重新加载，发现它仍然可以正常运行，没有任何错误。有谁知道这个的解决方案吗？

【问题讨论】：

peroperly > 正确，组件 > 组件 :)

标签： javascript reactjs routing react-router

【解决方案1】：

你在这里打错了<Route path="/" componenet={Main}>它的组件

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={Index}></IndexRoute>
      <Route path="portfolio" component={Portfolio}></Route>
   </Route>
 </Router>,
 document.getElementById('app')
);

和

export default class Main extends React.Component {     
  constructor(props) {
    super(props)
  }
  render() {
    console.log("asdfasfsaf");
    return(
      <div>
          <h1> This is Main Page </h1>
          {this.props.children}
      </div>
    )
  }
}

【讨论】：