javascript - React Router 路径变量也与其他路径一样，React 无法区分

Question

我正在为项目中的不同链接设置 react 路由器，但问题是我需要 react 路由器来区分用户用户名变量和其他路径之间的区别。

例如:基本网址/管理基本网址/丹尼尔

React 不知道其中的区别。我将在数据库中有一个用户名列表，如果用户不存在，则返回错误，这意味着该页面不存在。

这是我的代码:

class App extends Component{
  render(){
    return (
      <Router>
        <Route exact path="/" render={props => (
          <React.Fragment>
            <h1>Hey</h1>
          </React.Fragment>
        )}
        />

        <Route exact path="/admin" render={props => (
          <React.Fragment>
            <h1>admin</h1>
          </React.Fragment>
        )}
        />

        <Route path="/:user" component={UserComponent}
        />
      </Router>
    );
  }
}

Answer 1

您可以使用 match.url 属性来选择渲染哪个组件，例如:

    <Route path="/:user" render={props => {
      if(props.match.url === '/admin') {
        return (
          <React.Fragment>
            <h1>Hey</h1>
          </React.Fragment>
        )
      } else return (<UserComponent {...props} />)
    }} />