How to refresh to a specific nav with react bootstrap?

Question

I'm using react bootstrap and create a multi-page project that I handle with react-router-dom.

The problem I am facing is with bootstrap tabs.

<Tabs defaultActiveKey="Home" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <Sonnet1 />
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <Sonnet2 />
  </Tab>
  <Tab eventKey="contact" title="Contact">
    <Sonnet3 />
  </Tab>
</Tabs>

The following code generates a Tab where you can click on three different links and generate different content accordingly.

The reason I'm using the Tab is because I don't want to reload the entire page when the user clicks on "Profile" or "Contact". Therefore, everything is handled on one page "localhost:3000/Thepage" and a component is shown depending on what they click.

The issue I'm facing is that if the user refreshes while being on "Profile" or "Contact", they will return to the Home tab and not on the tab they were seeing before.

Is there a way to create a link for these Tabs and not trigger a refresh? For example, when user is on Home, they will be on page localhost:3000/Thepage/Home. When they are on Profile, they will be on localhost:3000/Thepage/Profile. Such that when a refresh is triggered, they will be forwarded to the page they were before.

EDIT: Just tried a solution

import { Link, NavLink } from 'react-router-dom'
import { Navbar, Nav } from 'react-bootstrap'

    <Navbar>
      {/* "Link" in brand component since just redirect is needed */}
      <Navbar.Brand as={Link} to='/'>Brand link</Navbar.Brand>
       <Nav>
        {/* "NavLink" here since "active" class styling is needed */}
        <Nav.Link as={NavLink} to='/' exact>Home</Nav.Link>
        <Nav.Link as={NavLink} to='/another'>Another</Nav.Link>
        <Nav.Link as={NavLink} to='/onemore'>One More</Nav.Link>
       </Nav>
    </Navbar>

It refreshes the entire page unfortunately.

It could be a compatibility or implementation issue with how I handle react-router-dom. In my index.js I use the following:

<BrowserRouter>
    <Switch>
      <Route path="/" component={App} exact />
      <Route path="/About" component={About} exact />
      <Route path="/Contact" component={Contact} exact />
      <Route path="/FAQ" component={FAQ} exact />
      <Route path="/Blog" component={Blog} exact />
      <Route path="/Main" component={Main} exact />
    </Switch>
</BrowserRouter>

Have you read [this piece of the documentation](https://react-bootstrap.github.io/components/tabs/#tabs-custom-layout)? [This answer](https://stackoverflow.com/questions/35687353/react-bootstrap-link-item-in-a-navitem#answer-36933127) might help. — Tholle, Mar 09 '19 at 15:03
I tried the LinkContainer Using Tab container. Unfortunately when I decide to go for "/Thepage/Profile" it sends be to a blank page. It could be a compatibility issue with react-router-dom — Sophie259, Mar 09 '19 at 15:43
Managed to find the solution. I needed to specify router and routes in the file which I didn't do. https://codesandbox.io/s/3qm35w97kq — Sophie259, Mar 09 '19 at 15:53

How to refresh to a specific nav with react bootstrap?

0 Answers0