react.js redirect to view

Question

i want redirect to "/user". i write but this not work. how to correctly redirect to the right page

  onClick = (e) => {

        this.setState({ errorLoad: false});

        getPlayerInfo(this.state.id).then(data => {
          if(data.success == false) {

            this.setState({ errorLoad: true});
            return;
          }
          this.setState({ user: data.player});
          console.log(data);

          <Redirect to="/user"/>
        });
      }

My router list. Among them there is a router with the path "/ user"

<Route path="/user" render={(props) => <User {...props} user={this.state.user} />}  />

UPADATE App.js The button I click on is in the component <SearchForm/>

 render() {

        let style = {marginLeft: '20px'};
        return (
          <div>
            <Header source='https://www.shareicon.net/data/2017/02/15/878753_media_512x512.png'/>
            <SearchForm onClick={this.onClick} style={style} onChange={this.onHandle} placeholder="search"/>
             <Centered style={ {marginTop: '50px'} }>
              <BrowserRouter>
                  <Switch>
                    <Route exact path='/' component={Startup} />
                    <Route path="/user" render={(props) => <User {...props} user={this.state.user} />}  />
                  </Switch>
              </BrowserRouter>
             </Centered>

          </div>
        );
      }

Possible Duplicate of [Programmatically Navigate using react-router](https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108) — Shubham Khatri, Jun 13 '18 at 17:41

Chase DeAnda · Answer 1 · 2018-06-13T18:22:55.017

You need to use this.props.history to manually redirect:

  onClick = (e) => {

        this.setState({ errorLoad: false});

        getPlayerInfo(this.state.id).then(data => {
          if(data.success == false) {

            this.setState({ errorLoad: true});
            return;
          }
          this.setState({ user: data.player});
          console.log(data);

          this.props.history.push('/user');
        });
      }

You should be getting history as a prop from your <Router> component.

EDIT:

Okay thank you for the code update. The SearchForm component is not nested under your BrowserRouter, so it is not getting the history prop. Either move that component inside the BrowserRouter or use the withRouter HOC in SearchForm reacttraining.com/react-router/web/api/withRouter

Option 1: Move SearchForm inside the BrowserRouter

 render() {

        let style = {marginLeft: '20px'};
        return (
          <div>
            <Header source='https://www.shareicon.net/data/2017/02/15/878753_media_512x512.png'/>
             <Centered style={ {marginTop: '50px'} }>
              <BrowserRouter>
                  <SearchForm onClick={this.onClick} style={style} onChange={this.onHandle} placeholder="search"/>
                  <Switch>
                    <Route exact path='/' component={Startup} />
                    <Route path="/user" render={(props) => <User {...props} user={this.state.user} />}  />
                  </Switch>
              </BrowserRouter>
             </Centered>

          </div>
        );
      }

Option 2: use the withRouter HOC to inject the history prop into SearchForm manually:

import { withRouter } from 'react-router-dom';

class SearchForm extends React.Component { ... }

export default withRouter(SearchForm)

@Санитариум You need to make sure you are passing the props from the `Route` all the way down to the component you are trying to redirect from. If you post more code that would help. — Chase DeAnda, Jun 13 '18 at 17:51
Or you can use the `withRouter` HOC https://reacttraining.com/react-router/web/api/withRouter — Chase DeAnda, Jun 13 '18 at 17:52
@Санитариум Okay yes, the `SearchForm` component is not nested under your `BrowserRouter`, so it is not getting the `history` prop. Either move that component inside the `BrowserRouter` or use the `withRouter` HOC in `SearchForm` https://reacttraining.com/react-router/web/api/withRouter — Chase DeAnda, Jun 13 '18 at 18:19

score 2 · Answer 2 · answered Jun 13 '18 at 17:45

There are two ways to programmatically navigate with React Router - <Redirect /> and history.push. Which you use is mostly up to you and your specific use case.

<Redirect /> should be used in user event -> state change -> re-render order. The downsides to this approach is that you need to create a new property on the component’s state in order to know when to render the Redirect. That’s valid, but again, that’s pretty much the whole point of React - state changes update the UI.

The real work horse of React Router is the History library. Under the hood it’s what’s keeping track of session history for React Router. When a component is rendered by React Router, that component is passed three different props: location, match, and history. This history prop comes from the History library and has a ton of fancy properties on it related to routing. In this case, the one we’re interested is history.push. What it does is it pushes a new entry onto the history stack - aka redirecting the user to another route.

As @Chase DeAnda mentioned, Your component is not under `Router`. Hence you need to wrap it with `withRouter` which passes `history` props to the component. — Hriday Modi, Jun 13 '18 at 18:31

react.js redirect to view

2 Answers2