React-router v.4 beta show all the "pages" at once

#1

My app is not routing properly, and I can’t understand where’s an error.
The app is using react-router v4 beta, consists of two pages and these two pages are displayed on one page one by one. Here’s the structure of result code from react extension:

Screenshot from 2017-02-12 19:42:28.png716×273 31.3 KB

And here’s the code:

import React from 'react'
import { render } from 'react-dom'
import Route from 'react-router-dom/Route'
import { BrowserRouter } from 'react-router-dom'
import Landing from './Landing'
import Products from './Products'

import 'bootstrap/dist/css/bootstrap.css'

const App = React.createClass({
  render () {
    return (
      <BrowserRouter>
        <div className='app'>
          <Route exact pattern='/' component={Landing} />
          <Route pattern='/products' component={Products} />
        </div>
      </BrowserRouter>
    )
  }
})

render(<App />, document.getElementById('app'))
#2

I’m not a react-router expert, but I’ve been using it for my latest project. I think that nesting your routes may solve the problem. Looking at the sample code in the react router tutorial, it looks like you may want to structure it this way:

<Route path="/" component={App}>
    <IndexRoute component={Landing} />
    <Route path="/products" component={Products} />
</Route>
#3

Hi @Y-Taras

I believe the prop you want to match the URL is path not pattern, as far as I’m aware, pattern isn’t part of the API.

<Route exact path='/' component={Landing} />
<Route path='/products' component={Products} />
1 Like
#4

Sometimes one can’t see evident things right on his nose. :open_mouth:
THank’s

#5