score:5

Accepted answer

HTML Concept

This is actually one of the great advantages of react-router, because in development stage you have no idea, where the project is going to be deployed. It might be deployed on a:

  • Primary Domain
  • Sub Domain
  • Sub Directory

So the best approach is to provide the define all the relative URLs in a base URL agnostic way. basename in React-Router is not actually something new, and we have the <base> head tag in HTML:

<head>
   <base href="https://www.yoursite.com/some/basename/" target="https://www.yoursite.com/other/">
</head>

This tag means that all the relative URLs in the page will have https://www.yoursite.com/some/basename/ added to them, such as:

<img src="header.jpg">

Will be the same as

<img src="https://www.yoursite.com/some/basename/header.jpg">

and all relative links and form actions will also have href attached to them.


React Router

React-Router basically uses this concept (however, not base tag), so when you set basename in the main ` the following elements will know nothing about basename:

  • <Route>
  • <Link>
  • <Redirect>
  • matchPath

so when you have a Link like this:

<Link to="/page2" />

it will actually redirect to /some/basename/page2.


basename

  • React-Router Docs suggests to that A properly formatted basename should have a leading slash, but no trailing slash. (eg. /some/business) . However, in most of the modern browsers, it doesn't matter at all.

matchPath

Now let's talk about the matchPath. As I said before, matchPath does not know anything about the basename, so you have these in mind:

  • make sure that the input URL does not have basename inside it.
  • Do not use window.location.pathname, instead use the React-Router location props

Then you should be fine. So this will always work regardless of your environment (dev/prod):

matchPath(props.location.pathname, {
    path: '/business',
    exact: true,
});

Notes

If with all these in mind, you run into some problem throughout your project (including all links, all redirects, all routes, and also matchPath), then your base basename is set wrong in the production environment.

score:0

Based on this github issue comment

basename comes from the <base href="/foo"> HTML element, which applies a basename to all links on the page. In that case, the rest of the HTML doesn't "know" about that base URL; it's just automatically prepended to any href.

Similarly, the basename in Router is something the application doesn't know about. It just <Link>'s to various routes and is unaware of the basename being attached.

When you are using using mathPath, instead of using window.location.pathname if you use location.pathname provided by Router, you will receive the pathname that matches your route instead of the entire pathname which includes basename.

matchPath(location.pathname, {
  exact: true,
  location: undefined,
  path: "\/business",
  strict: undefined
})

and the above will return true if the path is /some/basename/busines


Related Query

More Query from same tag