CODEWITHSUNDEEP
javascriptreactjs
Yuri Rech
Yuri Rech

Reputation: 67

React router rendering wrong page

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!!

Upvotes: 0

Views: 804

Answers (3)

Harvey
Harvey

Reputation: 572

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.

Upvotes: 0

Chris Parsonage
Chris Parsonage

Reputation: 93

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

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 1241

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

Upvotes: 0

Related Questions