I think the issue is with binding: constructor(props){ super(props); this.goBack = this.goBack.bind(this); // i think you are missing this } goBack(){ this.props.history.goBack(); } ….. <button onClick={this.goBack}>Go Back</button> As I have assumed before you posted the code: constructor(props) { super(props); this.handleNext = this.handleNext.bind(this); this.handleBack = this.handleBack.bind(this); // you are missing this line }
The official documentation is clear: <NavLink> A special version of the <Link> that will add styling attributes to the rendered element when it matches the current URL. Thus, the answer is NO. There are no other reasons except the mentioned one.
You can make use of history.listen() function when trying to detect the route change. Considering you are using react-router v4, wrap your component with withRouter HOC to get access to the history prop. history.listen() returns an unlisten function. You’d use this to unregister from listening. You can configure your routes like index.js ReactDOM.render( <BrowserRouter> <AppContainer> … Read more
You’re going to want to use the Redirect component. There’s a few different approaches to this problem. Here’s one I like, have a PrivateRoute component that takes in an authed prop and then renders based on that props. function PrivateRoute ({component: Component, authed, …rest}) { return ( <Route {…rest} render={(props) => authed === true ? … Read more
I use withRouter to get the location prop. When the component is updated because of a new route, I check if the value changed: @withRouter class App extends React.Component { static propTypes = { location: React.PropTypes.object.isRequired } // … componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { this.onRouteChanged(); } } onRouteChanged() { console.log(“ROUTE CHANGED”); } // … Read more
In the 5.1 release of react-router there is a hook called useLocation, which returns the current location object. This might useful any time you need to know the current URL. import { useLocation } from ‘react-router-dom’ function HeaderView() { const location = useLocation(); console.log(location.pathname); return <span>Path : {location.pathname}</span> }
In react-router-v4 you don’t nest <Routes />. Instead, you put them inside another <Component />. For instance <Route path=”/topics” component={Topics}> <Route path=”/topics/:topicId” component={Topic} /> </Route> should become <Route path=”/topics” component={Topics} /> with const Topics = ({ match }) => ( <div> <h2>Topics</h2> <Link to={`${match.url}/exampleTopicId`}> Example topic </Link> <Route path={`${match.path}/:topicId`} component={Topic}/> </div> ) Here is a … Read more
If you are targeting browser environments, you need to use react-router-dom package, instead of react-router. They are following the same approach as React did, in order to separate the core, (react) and the platform specific code, (react-dom, react-native ) with the subtle difference that you don’t need to install two separate packages, so the environment … Read more
The edit you posted was valid for an older version of React-router (v0.13) and doesn’t work anymore. React Router v1, v2 and v3 Since version 1.0.0 you define optional parameters with: <Route path=”to/page(/:pathParam)” component={MyPage} /> and for multiple optional parameters: <Route path=”to/page(/:pathParam1)(/:pathParam2)” component={MyPage} /> You use parenthesis ( ) to wrap the optional parts of … Read more
You can use the history methods outside of your components. Try by the following way. First, create a history object used the history package: // src/history.js import { createBrowserHistory } from ‘history’; export default createBrowserHistory(); Then wrap it in <Router> (please note, you should use import { Router } instead of import { BrowserRouter as … Read more