Passing part of an url to another function in React

Question

Is there a way for React to take the back of an url user entered and pass it to a function? for example: www.site.com/foobar will pass the foobar to a function. Essencially what i'm trying to do is to run a check on foobar being in my database inside the checker function, if not there display 404 page not found.

const NotFound = () => (<h1>404.. This page is not found!</h1>)

class App extends Component {

  checker : function(e){
    if(foobar exists)
      //load page with data
    else
      // {NotFound}
  }

  render() {
    return (
      <Router history={hashHistory}>
        <Route path='/' component={LoginPage} />
        <Route path='*' component={this.checker()} />
      </Router>
    )
  }
}

no i'm planning on making a email verification system that generates a random token to put on the back of an url — Eric
– Eric, Commented Jun 6, 2017 at 22:57
yeah, like the route is actually /something/:someId and would handle /something/somereallylongtoken — Tyler Sebastian
– Tyler Sebastian, Commented Jun 6, 2017 at 22:58
depending on the version you're using, you can find what you're looking for here github.com/reactjs/react-router-tutorial/tree/master/lessons/… — Tyler Sebastian
– Tyler Sebastian, Commented Jun 6, 2017 at 22:59
right so something like .com/abcdefg and i thought i can use '*' to just accept any value which i can pass to a function to apply logic to determine whether or not it's a token within my database. — Eric
– Eric, Commented Jun 6, 2017 at 23:01

Tyler Sebastian · Accepted Answer · 2017-06-06 23:07:49Z

1

To expand what I had written in my comment -

class App extends React.Component {
  render() {
    return (
      <Router history={hashHistory}>
          <Route path='/' component={LoginPage} />
          <Route path='/:token' component={EmailValidation} />
      </Router>
    )
  }
}

class EmailValidation extends React.Component {
  state = { checked: false, valid: false }

  componentDidMount = () => {
    checkToken(this.props.params.token).then((valid) => {
      this.setState({ checked: true, valid })
    })
  }

  render() {
    const { checked, valid } = this.state

    return (
      <div>
        { checked
          ? <div>{ valid ? 'valid' : 'invalid' }</div>
          : <div>Checking token...</div> }
      </div>
    )
  }
}

this would be a good use case for an HoC which conditionally renders either the component you want or a 404 page - it would remove the binding between the 404 page and the email validate component (which are only sorta-kinda related)

if you're into using libraries, recompose has a bunch of nice helpers which can accomplish something like this for you.

something else you can do is use react-router's onEnter callback/prop although, iirc, you can't directly access props from that callback.

answered Jun 6, 2017 at 23:07

Tyler Sebastian

9,5887 gold badges42 silver badges64 bronze badges

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

1 Comment

Eric Over a year ago

It took me a while, but i managed to figure out how to pass the data along. Thank you for the help!

Collectives™ on Stack Overflow

Passing part of an url to another function in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related