I am now using fluxible with react-router, I want to perform action and then redirect after the callback.
In the action, the action context has no router and fail to change the route after the action.
I have tried to find example but I can only found using browserHistory.
I can now push the browserHistory but somehow I can't find the current path. (because my new path is the depends on the current path /:id/profile, and then I want to redirect to /:id/details/:version), So I need to get back /:id/details before I append the version).
How to find the current route in the action where I can only access the action context without router instance?
Sometimes my react router works on server side but not client side. It will show when I refresh the page but 404 when in client side only.( I guess because I am using the relative link)
Does react router support relative link in the ?
How to pass the params and router in the stateless component?
In the stateless component, I can only access props but not context. So I can't access the router or params?
I want to make use of the params and link with an absolute path with id.
Thanks
For the Question 3, I have figured out the method to access the params
In fact, the second argument in the stateless component is context. I have pass the params and obtain there.
e.g
const CompanyDetail = (props, context) => {
}
CompanyDetail.contextTypes = {
params: PropTypes.object,
};
Related
I'm building up a website using ReactJS, REdux,React-Router.I want to access the data upon a different Route i.e for search functionality but I'm unable to do so. I'm only able to access data upon same page.
My App Component
Home Component
I'm dispatching the Action from SearchComponent to store.
I want to access data on /Search Route but unable to do so.
You should point to the component in route element.
Add the component attribute to the route element, pointing towards the component that it should use when hitting the search route.
Remember to import the component first.
What I want is to prevent some routes from being triggered manually via the browser URL. So, is there any way to tell if the route to be applied has been triggered manually(typing in the browser URL location) or through React router (<Link> or useHistory().push)?
When a user manually browses the entire app is remounted, when react router is used the route is "fake" and only what is new is mounted. You could set window.location to state in a component above your routing logic that is set on mount. This would stay the same when react router does the routing, but change when manually routing since the app would remount. You could examine this route for sub-paths to see if the user manually browsed.
I would suggest using protected routes instead. You could "enable" the routes when the conditions you need in your app are met.
I've been trying to find a straight answer to this and even after searching StackOverflow, I can't find a correct answer for the current version of React.
In my case, I have the following scenario-- the user sets up their data, they post it to the server and within my Save() method, if the save operation is successful, I want to redirect them to the root home page.
Much of the documentation I've found mentions using this.props.history.push(...) to push the new route. However, something has changed with React 4.0.0+ and now history is undefined on the props page.
I am not necessarily interested in pushing the new route to the history object if that is a deprecated way of routing to another page. However, all of the more current examples I've found talk about setting up routes and links within the JSX. That's fine, but I've yet to find a way to programmatically redirect the page un certain code conditions.
Apologies if there is an answer out this already, but I haven't found a straight answer.
The route props are only given to the components that are used for the component or render props of the Route components.
If you want to use the route props in any other component in your app, you need to pass the props manually or use the withRouter HOC.
import { withRouter } from "react-router-dom";
// ...
export default withRouter(MyComponent);
You have to connect this component with router. To connect you have to use withRouter.
export default withStyles(commonModalStyle)(withRouter(connect(mapStateToProps, mapDispatchToProps)(NewOrUpdateModal)));
Please refer this
I am wondering what would be the best pattern to subscribe for browser history changes with the latest version of react-router. I was reading the current documentation, but it looks like the only option which is mentioned there is by explicitly retrieving props passed by the <Match/> container to the render function or to the component. This solution is also described here:
https://stackoverflow.com/a/41006114/2817257
But what if I would like to get route parameters deeper in the component tree in a clean way?
What I am thinking about is to create a container component that retrieves router from context and subscribes to location changes. However, with the current version 4.0.0-alpha.6 even though the router object is already in the context, it only contains the following methods:
blockTransitions
createHref
replaceWith
transitionTo
which are not very promising, because it looks like router is not exposing the history object at all. Maybe there's some other object that's added to the context that could be helpful?
react-router docs are down ATM, but in v3 you could pass an onUpdate function as a prop to the Router component to listen to router state changes.
Other option is to import browserHistory, which is is implemented with history (again v3 knowledge as v4 docs are down) and subscribe to history changes with listen, like this
import { browserHistory } from 'react-router'
browserHistory.listen((location, action) => {
// do whatever you need here
})
I don't get the docs from React Router below:
But now Home can't participate in routing, like the onEnter hooks,
etc. You render in the same position as Accounts and Statements, so
the router allows you to have Home be a first class route component
with IndexRoute.
What does he mean by routing here? What is onEnter hooks?
Since App is wrapping other routes, the route that matches the given url is passed to App to be rendered via this.props.children. Because of this, you don't get access to react-router's hooks for Home if you do render Home via a statement such as {this.props.children || <Home/>}. One such hook isonEnter, which fires off a callback whenever a route is entered.
When you define Home as an IndexRoute, it is a distinct route that will match whatever route App matches. This way, we don't need the or clause in App, we can just render the child route via {this.props.children}
The docs here are a little more straightforward:
Imagine we'd like to render another component inside of App when the
URL is /. Currently, this.props.children inside of App's render method
is undefined in this case. We can use an <IndexRoute> to specify a
"default" page.
As far as onEnter the docs here are better:
Routes may also define onEnter and onLeave hooks that are invoked once
a transition has been confirmed. These hooks are useful for various
things like requiring auth when a route is entered and saving stuff to
persistent storage before a route unmounts.