Ссылка отображается, но не перенаправляется с помощью <Link>

Question

Я пытался перенаправить страницу, используя <Link>, и у меня есть то, что URL-адрес изменяется, но страница не перенаправляет. Только после того, как я обновлю страницу, она покажет.
Я искал и нашел несколько ссылок:
1. Один на правильный синтаксис
2. Я реализовал ссылку в маленьком HTML

Теперь вот часть моего кода

App.Js

import React from 'react';

import { Switch , Route , BrowserRouter } from 'react-router-dom';
import HomePage from './section/home';
import Oneup from './section/oneup';

function App() {
  return (
    <div className="main homepage">
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/" component={HomePage} exact={true} />
            <Route path="/oneup" component={Oneup} exact={true} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

main_content.js

Здесь я включил <Link>

import React from 'react';
import { BrowserRouter, Link } from "react-router-dom";

class Main_content extends Component {
  render() {
    return (
      <div class="ib-center">
         <BrowserRouter>
            <Link to="/oneup" class="btn">VIEW CASE</Link>
         </BrowserRouter>
      </div>
    )
  }
}

Теперь я не могу понять, где я иду не так.
сгенерированная ссылка работает нормально и обновляется вручную.

Answer 1

Используйте один BrowerRouter для переноса, вы использовали BrowerRouter в App.js и main_content.js тоже

class Main_content extends Component {
  render() {
    return (
      <div class="ib-center">
         <div>
            <Link to="/oneup" class="btn">VIEW CASE</Link>
         </div>
      </div>
    )
  }