URL routing issue when using react

Question

I'm creating web app using react and currently I'm having an issue when when navigating through the pages. Following is the detailed description. Hope some one can assist me.

My component (Task) is like this (simplyfied)

class Tasks extends Component {

    constructor(props) {
        super(props);
        this.type = props.match.params.type;
    }


    render(){
        return ( <h1>{this.type} </h1> );
    }
}

And I do the routing from a seperate component using react-router-dom as following

:
:
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
:

    <Route path={"/tasks/:type/"} component={Tasks}  />

Finally I'm calling this routing component from one of my navigation menu by setting the urls as following

import MenuItem from 'material-ui/Menu/MenuItem';


          <MenuItem>
                <Link name="application_creation" to="/tasks/type1">Type One</Link>
          </MenuItem>
          <MenuItem>
                <Link name="application_creation" to="/tasks/type2">Type Two</Link>
          </MenuItem>

With this implementation, when i select a one url (from the navigation menu) it does not work as expected. When one is selected and then select the other one, it does not navigate as expected. If i type the url on the browser or refresh the page, it directs to the correct page (other url).

Hope I made my question clear :D . Can some one guide me in the right direction on how to fix this please?

Thanks

I would say try HashRouter instead of BrowserRouter - it will simplify the development process as it just works as you would expect. Once you've developed your app, you can look into re-factoring to BrowserRouter. — Christopher Messer
– Christopher Messer, Commented Aug 21, 2017 at 15:11
return ( <h1>{this.type} </h1> ); - if props.type changes, this won't update as you only sync it in the constructor — Dimitar Christoff
– Dimitar Christoff, Commented Aug 21, 2017 at 15:28
echoing what @DimitarChristoff says. no need to use a class at all based on what you have — azium
– azium, Commented Aug 21, 2017 at 15:31

Dev · Accepted Answer · 2017-08-23 06:50:21Z

1

You should have routes /tasks/type1 and /tasks/type2 defined in your Routes. You can design something like this :

//Assume MainRoutes.js : which would have your main app navigation routes.
export default function MainRoutes(props) {
  return(
     <Router>
        <App> // Your Main App Component
          <Switch>
              <Route path='/' component={SomeHomeComponent}/>
              <Route path='/tasks' component={TaskRoutes}>
              <Route component={()=>(<NotFound/>)}/>
          </Switch>
       </App>
  </Router>
 );
}

//TaskRoutes.js Component
.
.
.
<TaskLayout>
    <Switch>
        <Route path='/tasks/type1' component={Tasks}/>
        <Route path='/tasks/type2' component={Tasks}/>
    </Switch>
</TaskLayout>


//TaskLayout.js Component : where you can render your menu items
.
.
.
<MenuItem>
   <Link name="application_creation" to="/tasks/type1">Type One</Link>
</MenuItem>
<MenuItem>
   <Link name="application_creation" to="/tasks/type2">Type Two</Link>
</MenuItem>
.
.
.

Probably in your case, you want to re-render component based on type, something like this:

class Tasks extends Component {
   constructor(props) {
      super(props);
      this.state = {
        type: ''
      }
   }

   componentDidMount() {
      this.setState({
         type: this.props.match.params.type
      });
   }

   render(){
      return ( <h1>{this.state.type} </h1> );
   }
}

Update:

When the component instance is rendered into DOM for the first time, React will call componentDidMount() if it is defined. This is the first time you have access to the DOM and child refs. Now the component instance is rendered and alive. It will live and update until it is unmounted.

ComponentDidMount will be called once if you are switching between routes having same component and just different params, your original component does not get unmount or remount. But instead receive new props. So, you could use the componentWillReceiveProps(newProps) function and look for newProps.params. This is the expected behaviour. Now, it depends how you want to go implementing routes. You can use different components for Type1 and Type2, if this is what you want.

edited Aug 23, 2017 at 6:50

answered Aug 21, 2017 at 15:27

Dev

3,9323 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dev Over a year ago

@Chamila Adhikarinayake: Does this solve your purpose?

Chamila Adhikarinayake Over a year ago

thanks for providing a solution. but it didn't solve the problem i have. I added some console logs and found out that only render() method gets executed every time but componentDidMount() only get executed once for both routing. any suggestion to load both these componenet twice? (doing a refresh works btw)

Dev Over a year ago

@ChamilaAdhikarinayake, Please take a look at update.

Chamila Adhikarinayake Over a year ago

Thanks. this is exactly what i needed.

Collectives™ on Stack Overflow

URL routing issue when using react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related