Перейдите на совершенно новую страницу по нажатию кнопки, используя ответ js_, не имея кнопок маршрута на следующей странице

Question

Я пытался перемещаться с одной страницы на другую, используя Route / BrowserHistory , но они делают то, что кнопки маршрутизатора остаются в верхней части страницы. Тем не менее, я хочу перейти на совершенно другую страницу, которая не содержит кнопок маршрутизации.

Например, в моем случае моя первая страница состоит из двух кнопок Конфигурация и Пользовательский портал . При нажатии на любую из кнопок я хочу перейти на новую страницу, т.е. страницу UserPortal, нажав Портал пользователя .

Вот мой код:

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

Что я должен сделать, чтобы получить желаемый результат?

Ваша помощь будет принята с благодарностью! Благодаря.

Answer 1

Так я решил свою проблему. Я последовал этому примеру , и это сработало.

Указатель. js

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

Маршруты. 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>