使用反应 js_在下一页上没有路由按钮，在按钮点击时导航到全新的页面

Question

I have been trying to navigate from one page to another using Route/BrowserHistory but what they do is that the router buttons stay on the top of the page. However, I want to navigate to a totally different page which does not contain that routing buttons.

For example in my case, my first page consists of two buttons Configuration and User Portal . On clicking any of the buttons, I want to jump to a new page ie UserPortal page on clicking User Portal .

Here is my code:

<div className="App">
   <BrowserRouter>
      <div>
        <nav aria-label="breadcrumb">
          <ol className="breadcrumb" style={{background: 'none'}}>
             <div className="breadcrumb-item">
                <Link to="configuration">
                  <button className='btn btn-primary' id='config' >Configuration</button>
                </Link>
             </div>
             <div className="breadcrumb-item">
                <Link to="userPortal">
                  <button className='btn btn-primary' id='portal' >User Portal</button>
                </Link>
             </div>
          </ol>
        </nav>
        <Switch>
           <Route path="/configuration" component={ArduinoInterface} />
           <Route path="/userPortal" component={UserPortal} />
        </Switch>
     </div>
  </BrowserRouter>
</div>

What should I do to get the desired result?

Your help would be appreciated! Thanks.

Answer 1

This is how I solved my problem. I followed this example and it worked.

Index.js

ReactDOM.render(<Router history={history}>
    <Routes />
  </Router> , document.getElementById('root'));

Routes.js

<Switch>
     <Route path="/" exact component={MainPage} />
     <Route path="/configuration" component={ArduinoInterface} />
     <Route path="/userportal" component={UserPortal} />
     <Route component={MainPage} />
</Switch>

MainPage.js

<div>
    <button type="button" id='config'><Link to='/configuration'>Configuration</Link></button>
</div>
<div >
    <button type="button" id='portal'><Link to='/userportal'>User Portal</Link></button>
</div>