search

react-boilerplate / react-boilerplate-cra-template

:fire: Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices.
https://react-boilerplate.github.io/react-boilerplate-cra-template/
MIT License
1.87k stars 393 forks source link

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

Closed lyndon-baylin closed 2 years ago

lyndon-baylin commented 2 years ago

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. image

2. image

3. image

4. image

Versions

vmundhra commented 2 years ago

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