React-router v4 _ got stuck at the beginning

1

Hello everyone. I want to get some skills on react router - so I’ve watched new course Complete Intro to React v2 (feat. Router v4 ) adn tried to repeat with some changes but got an errror:

Screenshot from 2017-02-06 12:27:57.png1289×178 40.4 KB

Here’s the code :

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Match } from 'react-router'
import Landing from './Landing'

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

const App = React.createClass({
  render () {
return (
  <BrowserRouter>
    <div className='app'>
      <Match exactly pattern='/' component={Landing} />
    </div>
  </BrowserRouter>
)
  }
})

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

Landing.js code:

import React from 'react'
import Navigation from './Navigation'

const Landing = React.createClass({
  render () {
    return (
      <Navigation />
    )
  }
})

export default Landing
2

HI @Y-Taras

What version are you using? I think they changed Match to Route for the beta.

Looking at the docs, Route is used in place of Match throughout and I see no reference to a Match component: https://reacttraining.com/react-router/.

1 Like
3

I use the latest version:
From package.json: “react-router”: "4.0.0-beta.4"
Hmm may be you are right. I suspected that also because I can’t find match in that tutorial

4

In that case you should just be able to replace Match with Route, the api seems the same to me (I used alpha V4). Don’t forget to change the imports as well!

5

ohhh, that beta and apha’s!! It’s a good lesson for not using them, or if use then very cautious with that.
So the problem was that in the tutorial that I used was using “react-router”: “4.0.0-alpha.5”, but I used latest version “react-router”: “4.0.0-beta.4”. So instead of

import { BrowserRouter, Match } from 'react-router'

I should use

import Route from 'react-router-dom/Route'
import { BrowserRouter } from 'react-router-dom'

and instead of

<BrowserRouter>
  <div className='app'>
    <Match exactly pattern='/' component={Landing} />
  </div>
</BrowserRouter>

I should use

<BrowserRouter>
  <div className='app'>
     <Route exact pattern='/' component={Landing} />
  </div>
</BrowserRouter>

After these changes - no errors were defined.

1 Like