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渲染两次？这也可能是导致问题的原因。只需将其导出并将其放入路由组件就足够了。

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

3 个答案: