Question

React是否有办法取回输入的网址用户并将其传递给某个功能？例如：www.site.com/foobar将把foobar传递给一个函数。重要的是我要做的是在checker函数中运行foobar检查我的数据库，如果没有显示404页面找不到。

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

Answer 1

扩展我在评论中所写的内容 -

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

对于HoC而言，这将是一个很好的用例，它有条件地呈现您想要的组件或404页面 - 它将删除404页面和电子邮件验证组件之间的绑定（这只是有点相关的）< / p>

如果您正在使用库，recompose有一堆很好的助手，可以为您完成这样的事情。

你可以做的其他事情是使用react-router的{{1}}回调/道具，但是，iirc，你不能直接从该回调中访问道具。

将部分URL传递给React中的另一个函数

1 个答案: