CODEWITHSUNDEEP
ruby-on-railsreactjs
Afas
Afas

Reputation: 806

React: add route with mandatory query string

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!

Upvotes: 0

Views: 188

Answers (1)

StackedQ
StackedQ

Reputation: 4139

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

Upvotes: 1

Related Questions