React: add route with mandatory query string

Question

I'm working on a project that uses Rails and React, with react-router version 4.2.0 and react-router-redux 5.0.0-alpha.9. It's the first time I use React and I'm having trouble routing.

In my routes.jsx file I have the following path:

const routes = [
  { path: /\/events\/(\d)$/, action: () => <EventForm /> },
];

When I type http://localhost:3000/events/2 in my browser I get the content back.

I want to modify my route so this link won't be valid unless there's a userToken appended to it as a query string. (I know this is not the best security practice but it's valid for the purpose of this project)

For example, the following link http://localhost:3000/events/2 should not work, but the link http://localhost:3000/events/2?userToken=abc should work.

I tried these options but it didn't work:

{ path: /\/events\/(\d)\?userToken\=(\w)$/, action: () => <EventForm /> }

{ path: /\/events\/(\d)\?userToken=[\w]$/, action: () => <EventForm /> }

Thanks!

StackedQ · Accepted Answer · 2018-08-11 06:41:01Z

1

One way is to check url param in componentDidMount lifecycle method of EventForm:

class EventForm extends Component{
    componentDidMount(){
        const {location, history} = this.props // these are by design in props when using react-router
        if(!location.query.userToken){
             history.push('/login') // or whatever route
        }

    }
    render(){
        return (<div>...</div>)
    }
}

export default EventForm

answered Aug 11, 2018 at 6:41

StackedQ

4,1491 gold badge30 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

React: add route with mandatory query string

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related