why isn't "exact" the default behaviour in react router

Question

I am really surprised this questions was not asked before. This or I am asking in a weird way.

In react router.. to make a route we do this:

<BrowserRouter>
    <Route path='/' component={Hello} />
    <Route path='/there' component={There} />
</BrowserRouter>

this code shows all kind of weird behavior, if I went to /there, the component Hello WOULD still be rendered.

The solution was to add a switch component and to reorder the Route components from the most specific. This seemed extremely ridiculous especially as someone coming from a back-end background. Why would I need to reorder my routes?? Plus, even when switch is added weird behavior is still there. for example any route starting with /there like /there/was/a/time still matches

the better optimal solution is to put exact on the Route components like this:

<BrowserRouter>
    <Route exact path='/' component={Hello} />
    <Route exact path='/there' component={There} />
</BrowserRouter>

This behavior provide the normal expected result like any other normal framework. Going to website.com/there or website.com/there/ renders There component. and going to website.com or website.com/ renders Hello

I think the majority of routes in any websites are better suited as exact. So why isn't exact set to true by default? and allow people to set it to false if they wanted to like exact={false}?

Is there something I am missing? I tried to look for this question but did not find an answer. In the docs they just mentioned that exact's default value is false without any further explanation

Answer 1

It's because of react-router's philosophy to be a "Dynamic" Router. What you expect from react-router is usually the default behavior of "Static" Routers.

In react-router, the Route component is simply checking the URL and if matched (URL starts with path), then it will render the passed component. It's useful for example when you want to render a part of a page conditionally based on URL.

Using the Switch component is the correct way to define your App's main routes and when you need to render only one of the components based on URL (same as switch in javascript). But why the exact prop is not true by default? Assume that you have the following pages:

• Home: /
• X: /x
  • XA: /x/a
  • XB: /x/b
• Y: /y
  • YC: /y/c

In this case (which is not an uncommon case in big applications), you need to define only the Home, X, and Y pages in your main component, and on X and Y components, you can define their corresponding sub-routes.