5. 5
    Use URL Parameters with React Router v4
    2m 36s

Use URL Parameters with React Router v4

InstructorJoe Maddalone

Share this video with your friends

Send Tweet

URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.

Brian Schmitt
~ 7 years ago

Unfortunately, it's not clear how to access match when referencing a component in the Route element. How does one get a reference to match in the more typical case like the one below?

<Route path="/somplace/:someParam" component={ SomeComponent } />

assuming SomeComponent is defined something like:

class SomeComponent extends Component {
   render() {
         // ... how to get the value of someParam here??
   }
}
Brian Schmitt
~ 7 years ago

...turns out its on props

class SomeComponent extends Component {
    render() {
        return (<h1>{ this.props.match.params.someParam }</h1>);
    }
}
Mohammed Arif
~ 6 years ago

Github project isn't working on both codesandbox as well as on local, getting below error:

Failed to compile.

Error in ./src/App.js
Module not found: ./lessons in /Users/arifmd/Dev/Playground/ReactJS/egghead-react-router-v4/src

 @ ./src/App.js 30:23-60

Chrome console output:

App.js:26 Uncaught Error: Cannot find module "./lessons"
    at webpackMissingModule (App.js:26)
    at App.js:26
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (App.js:26)
    at __webpack_require__ (bootstrap cb8d2b82933d4ca7c326:555)
    at fn (bootstrap cb8d2b82933d4ca7c326:86)
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap cb8d2b82933d4ca7c326:555)
    at fn (bootstrap cb8d2b82933d4ca7c326:86)
    at Object.<anonymous> (bootstrap cb8d2b82933d4ca7c326:578)
webpackMissingModule @ App.js:26
(anonymous) @ App.js:26
(anonymous) @ App.js:26
__webpack_require__ @ bootstrap cb8d2b82933d4ca7c326:555
fn @ bootstrap cb8d2b82933d4ca7c326:86
(anonymous) @ index.js:3
__webpack_require__ @ bootstrap cb8d2b82933d4ca7c326:555
fn @ bootstrap cb8d2b82933d4ca7c326:86
(anonymous) @ bootstrap cb8d2b82933d4ca7c326:578
__webpack_require__ @ bootstrap cb8d2b82933d4ca7c326:555
(anonymous) @ bootstrap cb8d2b82933d4ca7c326:578
(anonymous) @ bootstrap cb8d2b82933d4ca7c326:578
webpackHotDevClient.js:233 Error in ./src/App.js
Module not found: ./lessons in /Users/arifmd/Dev/Playground/ReactJS/egghead-react-router-v4/src

 @ ./src/App.js 30:23-60
Mohammed Arif
~ 6 years ago

Would suggest, If we can directly have codesandbox embedded in to the lessons itself, rather providing Github URL.