javascript - React 路由器渲染错误页面

Question

我正在开发一个网络应用程序，我是 react 路由器的新手。一切都很顺利，直到我发现自己需要渲染一个全新的页面，带有新的导航栏和所有内容。

这是我的 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。

希望我能很好地解释自己。 很高兴你能帮助我!!

Answer 1

您好，您可以尝试这样的操作，如果匹配，则首先渲染顶部的一个，如果不匹配，它将继续渲染应用程序的其余部分:)希望这是清楚的

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