This is my newest side project, the netflix clone. I used react-router v4
& autosuggest
.
github (https://github.com/kuanhsuh/netflix-clonev2)
demo (http://netflix-clonev2.surge.sh/#/)
However I found a bug, If I’m home the movie show page, the links in my search will not work(after clicking it the show component does not update). I think it has to do with router v4
and redux
integration.
I tried the this
method, but it still doesn’t work (Programmatically navigate using react router V4).
Here are my nav links and my routes.
Nav.js
import { Link, withRouter } from 'react-router-dom'
...
onSuggestionSelected = (event , { suggestion, history }) => {
event.preventDefault();
this.props.history.push('/movie/'+ suggestion.id)
this.setState({ value: ''});
}
....
Nav.propTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired,
}).isRequired,
};
export default withRouter(connect(mapStateToProps, {fetchSearch})(Nav));
App.js(where my routes are)
<Router>
<div>
<Nav />
<Switch>
<Route exact path="/" component={MovieList}/>
<Route path="/movie/:id" component={MovieShow}/>
<Route component={NotFound}/>
</Switch>
<Footer />
</div>
</Router>
Thanks for you help!! It means a lot for me since I'm still a beginner =)