React.js路由无法正常工作

Question

my / route doesn't properly render my main component.

Her is my code:

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

This is my Main component:

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

}

Once i load the website it doesn't console log anything nor render <h1> This is main page header. Also If I delete this Main componenet it still goes to my IndexRoute without any error which is my index componenet.

Answer 1

Try this:

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