Search redirect to Results, won't re render or redirect after initial use

[wsfuller]

Tech

• React Router: 4.0.0
• React: 15.4.2
• React Redux: 5.0.3
• Redux: 3.6.0

Do want to note this application is not using Redux integration but wanted to mention that it is being used in the project.

Steps to reproduce

Here are the code snippets for the components in question

Search & Results components

Would be happy to provide more if needed

Expected Behavior

Have 2 components, a Search component and a Results component. The Search component is rendered in the Header of the site so it is global. When a user enters text within that Search they will be redirected to the Results component. From the Results view a user can continue on clicking a rendered link or do another Search and re render the Results component

Actual Behavior

You can use the Search component a single time and be redirected to the Results component. If you are on the Results component and try to search again nothing happens. If you Search and redirect to the Results component and you navigate away then try to use Search again nothing happens.

It seems like:

• Redirection can only happen once, and application must be reloaded
• The Search component is updating as expected and updating state properly, but the Results component will not render after the first redirect

[timdorr]

Well, first off, why not store the results in the Redux store? If someone refreshes the results page, the location state will be lost and they will get no results displayed.

This is ultimately a duplicate of #5003. The <Redirect> component is staying mounted after displaying your results, and it doesn't accept updates, so it doesn't redirect when the props change in any way.

[wsfuller]

Is there a way to have some sort dialog about this? I've been working on this for the past few days and have tried multiple different ways to get this to work. I tried your suggestion with the Store albeit maybe not in the proper way. Essentially I just want a Results page if you go to it and nothing is there something stating that rendering is totally fine. If the user reloads and there isn't results that's fine too.

I looked at #5003 and stating that the <Redirect> component is staying mounted is much more information then I've been able to gather using the Discord channel, SO, Reddit, the docs, and uneventfully looking through issues open and closed trying to find something relateable. Thank you for helping me understand that a bit more. This is my first full React application so trying my best to keep up with all the changes, ecosystem, and learning the library.

Have tried to implement the key suggestion in #5003 by setting the Key State in <Search /> with a random number. I'm console logging the number since it's only 1-10 to eliminate that as a possible error because of redundancy:

this.state = {
      searchValue: '',
      results:[],
      key:''
    }
axios.get().then(){var keyValue = Math.floor((Math.random() * 10) + 1); this.setState({results: response.data, key: keyValue });}

return(
{this.state.results.length > 0 &&
          <Switch>
            <Redirect to={{
              pathname: '/results',
              state: { results: this.state.results },
              key: {key: this.state.key}
            }} />
            <Route exact path="/results" component={SearchResults} />
          </Switch>
)

However still getting the same results. PR #5162 looks to not be merged so maybe that's why the key doesn't work.

I've also tried using the Store in a different way:

• [Any View] > <Search /> > Dispatch FETCH_USER > <Redirect /> > <UserProfile/>. That has resulted in either The URL updating and nothing happening, <UserProfile> running a dispatch and returning no objects.

[ajl100b]

For those who are still having trouble with this specific use case - having a navbar with an embedded search bar component - the way around the issue of redirecting to a results component is by using componentWillReceiveProps() and (re)setting your state there.

https://gist.github.com/ajl100b/51970eb09e59421a6c431f0c9f67b2eb

Following the example here, in your cWRP(nextProps), reset the fireRedirect to false.