[React Router v4] Use URL Parameters

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.

<NavLink to="/demo" activeClassName={'active'}>Demo</NavLink>

Match:

                <Route
                    path="/:page"
                    children={({match}) => {
                        console.log("match:", match)
                        const page = match.params.page;
                        return match && <h2>demo: {page} </h2>
                    }}></Route>

<NavLink to="/demo/react" activeClassName={'active'}>Demo</NavLink>

Match:

                <Route
                    path="/:page/:sub"
                    children={({match}) => {
                        const page = match.params.page;
                        const sub = match.params.sub;
                        return match && <h2>demo: {page} -- {sub}</h2>
                    }}></Route>

<NavLink to="/demo-react" activeClassName={'active'}>Demo</NavLink>

Match:

                <Route
                    path="/:page-:sub"
                    children={({match}) => {
                        const page = match.params.page;
                        const sub = match.params.sub;
                        return match && <h2>demo: {page} -- {sub}</h2>
                    }}></Route>