Routing through <Link/> and <Navlink/> react-router-dom components did not work properly

[lyndon-baylin]

Description

Routing using <Link> and <Navlink> did not work properly as if the history did not sync into the browser.

Steps to reproduce

Steps to reproduce the behavior:

1. Issue the yarn cleanAndSetup command in the CLI to remove the default example of the boilerplate.
2. In <Home /> component create link like a sidebar navigation menu.
3. Create two components within the <Home /> component that serves as a separate pages something like in the screenshots section below. See screenshot 1.
4. Notice that in the browser when I click the link of Driver Logs the display is not what I expected. See the screenshots section below. See screenshot 2.

Expected behavior It should display the expected page based on what I desired to click.

Work Around To work around this issue, what I did was I remove the <BrowserRouter> component in the src/app/index.tsx and move it in the src/index.tsx like in the screenshots section below. See screenshot 3. And it works just fine, see screenshot 4.

Screenshots 1.

Versions

• react-boilerplate-cra-template: v1.2.5
• Node/NPM: Node v14.19.1 and NPM v6.14.16
• Browser: Firefox v102.0.1 (64-bit)

[vmundhra]

See your routes under the switch. The '/driver-logs' route should also have component prop and not render prop.