CODEWITHSUNDEEP
javascriptreactjsreact-router
Chris
Chris

Reputation: 437

React Router path var with other paths as well, React cant tell the difference

I am setting up react router for different link in my project but the problem is I need react router to tell the difference between a user username variable and other paths.

For example: baseUrl/admin baseUrl/daniel

React doesnt know the difference. I will have a list of usernames in a db and would return an error if the user doesnt exist then that means the page does not exist.

This is my code: 

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

Upvotes: 0

Views: 26

Answers (1)

Gustavo A Olmedo
Gustavo A Olmedo

Reputation: 575

You can use the match.url property to choose which component render, for example:

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

Upvotes: 1

Related Questions