Constructing the dynamic segments of a path that is passed to <Link> involves string manipulation. Everything that's part of the path goes in the to property. This means that you have to write more code to construct the string, but it also means less behind-the-scenes magic happening in the router.
Let's create a simple component that will echo back whatever is passed to the echo URL segment or the echo query parameter:
import React from "react";
import { withRouter } from "react-router";
export default withRouter(function Echo({
match: { params },
location: { search }
}) {
return <h1>{params.msg || new URLSearchParams(search).get("msg")}</h1>;
});
The withRouter() utility function is a higher-order function that returns a new component. This new component will have router-related properties passed to it, which you need if you want to work with path segment variables or the query string. The two properties...
