反應路由器呈現錯誤的頁面

Question

我正在開發一個Web應用程序，並且是新來響應路由器的。 在我發現自己需要用新的導航欄和所有內容渲染一個全新的頁面之前，Evrything的發展非常順利。

那就是我的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，但不要忽略上面的所有組件以及Header，Search等。

我試圖轉到我的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>
    )
}
}

Answer 2

嘗試在“路線”中的組件之前添加“精確”，或在鏈接中的“收件人”之前添加“精確”

Answer 3

嘗試，

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

為什么您要用reactDOM渲染兩次？ 那也可能是導致問題的原因。 只需將其導出並放入路徑組件中就足夠了。