Реакция маршрута JS не работает должным образом

Question

Мой / маршрут неправильно отображает мой основной компонент.

Вот мой код:

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 компоненту. Однако он не отображает <h1> This is Main Page </h1> из Main.js. Затем я полностью удалил весь код в Main.js и перезагрузил его и увидел, что он все еще работает без ошибок. Кто-нибудь знает решение для этого?

Answer 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> 
    ) 
    } 
}