Javascript 反应路由器呈现错误页面

我正在开发一个网络应用程序，我是一个新手。在我发现自己需要呈现一个全新的页面之前，所有的一切都进展得很顺利，包括新的导航栏等等

这是我的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>
);
}
}

类应用程序扩展组件{
render（）{
返回(
{/*切换到所需路径。将所有路由嵌套在此处*/}
);
}
}

所以，我想转到/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'));

ReactDOM.render(
{/*切换到所需路径。将所有路由嵌套在此处*/}
, 
document.getElementById（'root'）；

我的想法是，无论何时按register，它都会把我送到专业人士的仪表盘

在我的Register.js文件的末尾，您会发现

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

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

</div>
</BrowserRouter>

, document.getElementById('root'));

export default WrappedRegistrationForm;

const WrappedRegistrationForm=Form.create（）（RegisterProf）；
ReactDOM.render(
，document.getElementById（'root'）；
导出默认WrappedRegistrationForm；

我使用Ant设计，因此表单呈现WrappedRegistrationForm。起初它不起作用，然后我将它包装在BrowserRouter上，我不再收到错误，但现在当我按下register按钮时，它会将我带到/professional dashboard，但它会加载app.js而不是professional dashboard.js 有趣的是，如果我刷新页面，它会正常加载ProfessionalDashboard.js

希望我能解释清楚。

---

如果你能帮助我，我很高兴

尝试在路径中的组件之前包含“精确”，或在链接中的“To”之前包含“精确”

Hi可以尝试这样的方法，首先渲染顶部的组件，如果不匹配，则继续渲染应用程序的其余部分：）希望这是清楚的

class App extends Component {
 render() {
  return (
   <BrowserRouter> 
    <Switch> 
     <Route exact path='/profesional-dashboard' component={ProfessionalDashboard} />
     <StandarRoute path='/' component={MainPage} />
    <Switch /> 
</BrowserRouter>
);
}
}

class MainPage extends Component {
render(){
    return(
      <div className='App'>
          <Layout>
          <Header />
          <NavigationB />
          <Search /> 
            <Switch> {
                <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} />
            </Switch>
           </Layout>
           <Footer />
       </div>
    )
}
}

类应用程序扩展组件{
render（）{
返回(
);
}
}
类主页扩展组件{
render（）{
返回(
{
)
}
}

试试看

（）

顺便问一下，为什么要使用reactDOM渲染两次？这可能也是导致问题的原因。仅导出它并将其放入路由组件就足够了

<Route exact path="/register" render={() => ( <Redirect to="/dashboard"/>)