kaniosrn-j
5/13/2017 - 12:30 PM

React Routing

React Routing

// Tips: Whenever you passing a Javascript variable as "props", if you're not passing in as a "string" and if you passing in as "boolean" or a variable you need to put in curly bracket! e.g component={NotFound}
// Then make a stateless functional component
// wrap everything inside "BrowserRouter" component
// "Match" component is meaning that when the browser exact match the home page "/"
// then which component should be showing? in this case {StorePicker}
// cool thing about "Match's" you can place this anywhere in your application!
// use Miss tag when page is not found
const Root = () => {
  return(     
    <BrowserRouter>
      <div>
        <Match exactly pattern="/" component={ StorePicker } />
        <Match pattern="/store/:storeId" component={ App } />
        <Miss component={ NotFound } />
      </div>
    </BrowserRouter>
  )
}

render(<Root/>, document.querySelector('#main'));