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.
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??
}
}
...turns out its on props
class SomeComponent extends Component {
render() {
return (<h1>{ this.props.match.params.someParam }</h1>);
}
}
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
Would suggest, If we can directly have codesandbox embedded in to the lessons itself, rather providing Github URL.