CODEWITHSUNDEEP
javascriptreactjsroutesreact-router
avantago
avantago

Reputation: 41

React JS route doesn't work properly

My / route does not properly render my main component.

Here 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 this website, it goes to my Index Component. However It doesn't render out the <h1> This is Main Page </h1> of Main.js. Then I completely erased all the code in Main.js and reloaded and saw that it still ran without any error. Does anyone know a solution for this?

Upvotes: 1

Views: 573

Answers (1)

Alejandro
Alejandro

Reputation: 270

You have a typo here <Route path="/" componenet={Main}> its component 

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

and

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

Upvotes: 1

Related Questions