React router rendering wrong page

Question

i am developing an web app and I am new to react router. Evrything was going great until I found myself in need to render a whole new page, with new navbar and all.

that's my 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>
);
}
}

So, I wanted to go to /professional-dashboard but without rendenring all the components above such and Header, Search, etc.

I tried to go to my index.js file and set it up like this

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'));

The idea was, in my form whenever I press register, it should send me to the dashboard of the professional.

At the end of my Register.js file you would find

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

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

</div>
</BrowserRouter>

, document.getElementById('root'));

export default WrappedRegistrationForm;

I am using Ant Design, so the form renders WrappedRegistrationForm. At first it was not working then I wrapped it around BrowserRouter, I don't get the error anymore, but now when I press the register button, it takes me to /professional-dashboard but it loads app.js and not ProfessionalDashboard.js Funny thing is, if I refresh the page, it loads ProfessionalDashboard.js normally.

Hope I'm explaining myself well. Glad if you can help me!!

Chris Parsonage · Accepted Answer · 2018-11-08 15:00:47Z

Hi could try something like this rendering the top one first if its a match if not it will go on to render the rest of the app :) hope this is clear

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

Dmitriy · Accepted Answer · 2018-11-08 14:14:41Z

0

Try including "exact" before component in your Route, or including "exact" before the 'To' in your Link

answered Nov 8, 2018 at 14:14

Dmitriy

1,2411 gold badge12 silver badges29 bronze badges

Comments

Harvey · Accepted Answer · 2018-11-08 15:35:00Z

0

Try,

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

Why do you render two times with reactDOM by the way? That might be what’s causing the issue too. Just exporting it and putting it in route component should suffice.

edited Nov 8, 2018 at 15:35

answered Nov 8, 2018 at 15:29

Harvey

5721 gold badge8 silver badges27 bronze badges

Collectives™ on Stack Overflow

React router rendering wrong page

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related