React router отображает неправильную страницу

Я разрабатываю веб-приложение, и я новичок в реагировании на маршрутизатор. Все шло отлично, пока я не обнаружил, что мне нужно отрендерить совершенно новую страницу с новой навигационной панелью и всем остальным.

это мой app.js

class App extends Component {
render() {
 return (
  <BrowserRouter> 
  <div className='App'>
  <Layout>
  <Header />
  <NavigationB />
  <Search /> 
    <Switch> {/* to swtich to the desired path. Nest all route here */}
    <Route path='/' component = {Home} exact />
    <Route path='/login' component = {Login} />
    <Route path='/register-choice' component = {RegisterButton} />
    <Route path='/register-patient' component = {RegisterPatient} />
    <Route path='/register-professional' component = {RegisterProf} />
    <Route path='/profesional-dashboard' component = {ProfessionalDashboard} />
    </Switch>
    </Layout>
  <Footer />
  </div>
  </BrowserRouter>
);
}
}

Итак, я хотел перейти в / professional-dashboard, но без рендеринга всех вышеперечисленных компонентов, а также заголовка, поиска и т. д.

Я попытался зайти в свой файл index.js и настроить его так

ReactDOM.render(

<BrowserRouter>
<Switch> {/* to swtich to the desired path. Nest all route here */}
<Route path='/' component = {App} exact />
<Route path='/professional-dashboard' component= 
{ProfessionalDashboard} />
</Switch>
</BrowserRouter>, 

document.getElementById('root'));

Идея заключалась в том, что каждый раз, когда я нажимаю на регистрацию, моя форма должна отправлять меня на панель инструментов профессионала.

В конце моего файла Register.js вы найдете

const WrappedRegistrationForm = Form.create()(RegisterProf);

ReactDOM.render(
<BrowserRouter>
<div>
<WrappedRegistrationForm />

</div>
</BrowserRouter>

, document.getElementById('root'));

export default WrappedRegistrationForm;

Я использую Ant Design, поэтому форма отображает WrappedRegistrationForm. Сначала это не работало, затем я обернул его вокруг BrowserRouter, я больше не получаю ошибку, но теперь, когда я нажимаю кнопку регистрации, он переводит меня в / professional-dashboard, но загружает app.js, а не ProfessionalDashboard.js Забавно то, что если я обновляю страницу, она загружает ProfessionalDashboard.js как обычно.

Надеюсь, я хорошо объясняюсь. Рад, если вы можете мне помочь !!