React Rout v-4 `this.props.match.params` undefined and `staticContext` undefined

Question

I am using

    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2",

Hare my rout :

<BrowserRouter>
        <div>
            <Route exact path='/' component={Layout}></Route>
            <Route path='/about' name="about" component={About}>
                <Route path="/:article" component={anotherAbout}></Route>
            </Route>
            <Route path='/protfolio' name="protfolio" component={Portfolio}></Route>
        </div>
    </BrowserRouter >

When i am call {this.props.match.params.article} it give undefined

And my Console: this.props

Why staticContext: undefined and my props.match.params null object.

Have you tried nesting your routes properly to see if your problem is fixed? — Kyle Richardson, Jul 29 '17 at 21:39

Kyle Richardson · Answer 1 · 2018-04-12T13:46:22.793

Take a look at this basic example from the react-router v4 documentation.

Look at const Topics = ({ match }) => ( ... ) and you will see the nested routes at the bottom of this component. This is how you nest routes in react-router v4. If you fix this your problem should be resolved.

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

export default BasicExample

how funny you make copy form documentation which link already get from @maxim Comment .. Btw Thanks for your help :) — MD Ashik, Jul 29 '17 at 21:54
Not sure what you mean by how funny I copy something from documentation... I provided it because links can go stale and this is to help the community at large. Anyhow, yes you will need to do this for any page that you want nested routing in. You may not need nested routing though... you might just need conditional rendering within a component depending on search params. If that is the case, you should look at the HoC [withRouter](https://reacttraining.com/react-router/web/api/withRouter). — Kyle Richardson, Jul 29 '17 at 22:00
sorry for my bad comment Actually, I was solved already it from #maxim Comment [Link__](https://reacttraining.com/react-router/web/example/basic). however Thanks for your suggestion I will be also learn **withRouter** — MD Ashik, Jul 29 '17 at 22:06
I new in react facing too much problem in each and everyday and I am doing post on Stack-overflow How can I get help from you :) SO can I mention you my next Question ?? — MD Ashik, Jul 29 '17 at 22:08

score 3 · Answer 2 · answered Apr 19 '19 at 07:34

I think this is happen because of nested routes. Instead of using nested ones use

<BrowserRouter>
    <div>
        <Route exact path='/' component={Layout}></Route>
        <Route path='/about' name="about" component={About}></Route>
        <Route path="/about/:article" component={anotherAbout}></Route>
        <Route path='/protfolio' name="protfolio" component={Portfolio}></Route>
    </div>
</BrowserRouter >

and destructuring the matched params of url

const { article } = this.props.match.params

I think this works

React Rout v-4 `this.props.match.params` **undefined** and `staticContext` undefined

2 Answers2

React Rout v-4 `this.props.match.params` undefined and `staticContext` undefined