On the example folder of react-router where did they get the router context on Login.js. I'm very confused on this on. For reference, here's the link for the Login.js file.
I didn't see any variable declartion on router.
RouterContext has childContextType router
https://github.com/rackt/react-router/blob/master/modules/RouterContext.js#L36
childContextTypes: {
history: object,
location: object.isRequired,
router: object.isRequired
},
And login.js has this.
contextTypes: {
router: React.PropTypes.object
},
This is based on Context
Related
In react-router there's withRouter HOC that provides access to location.pathname
How can I get it in Universal Router?
history.location.pathname is only available in the browser so can't use that.
If you have universal routes like this:
const routes = {
path: '/page',
name: 'page',
parent: null,
children: [],
action(context, params) {
return '<h1>The Page</h1>'
},
}
(example from documentation https://github.com/kriasoft/universal-router/blob/master/docs/api.md). then you will have context.pathname inside the action. Hope it will help!
I am trying to use a CanActivate guard in angular2 to ask user to save changes.
I am using angular RC4
Boot.ts
bootstrap(App, [
...HTTP_PROVIDERS,
StorageService,
PortfolioNavigationGuard,
other...
Routes.ts
export const PortfolioRoutes: RouterConfig = [
{ path: 'portfolios', component: 'PortfolioListComponent' },
{ path: 'portfolios/:id', component: 'PortfolioModelComponent', canDeactivate: [PortfolioNavigationGuard] },
{ path: 'portfolios/:id/:action', component: 'PortfolioModelComponent', canDeactivate: [PortfolioNavigationGuard] }
Guard
#Injectable()
export class PortfolioNavigationGuard implements CanDeactivate<PortfolioDetailComponent> {
constructor(private router: Router) { }
canDeactivate(component: PortfolioDetailComponent) {
component.canDeactivate();
component.anyfunction() --- anyfunction is not a function
return true;
}
The error
EXCEPTION: Error: Uncaught (in promise): TypeError: component.canDeactivate is not a function
The component
export class PortfolioDetailComponent {
canDeactivate() {
console.log("WOW");
}
Why can't I call any functions on the component inside my guard?
I have made some changes:
Switched the guard implementation to a different component ( same one I defined in the route config) :
export class PortfolioNavigationGuard implements CanDeactivate<PortfolioDetailComponent> {
to
export class PortfolioNavigationGuard implements CanDeactivate<PortfolioModelComponent> {
There are two things to note. The first component is not loaded through router outlet, while the second is. I was thinking that components that belong to another(used as tag in template) still can access the route data (You can subscribe to the route id change let's say in components that were brought using a selector and not a router outlet), however it seems that for the guard, the component that you are putting the guard on must be brought with router outlet.
right now migrating from router v2 to v3 (feels like a deja vu). The routing configuration is now decoupled from the components again. It overthrows the logic I considered quite sensible. They have introduced a children property in the RouterConfig which gives me headache. Assume an application with many routes similar to this
/club/123/member/98/tasklist/921/edit
The route was spread over the following components with the following #Routes decorators
#Routes([{path: '/club/:id', component: DelegateClubComponent}])
export class MainApp {...}
#Routes([{path: 'user/:id', component: DelegateUserComponent}])
export class DelegateClubComponent {...}
#Routes([{path: 'tasklist/:id', component: DelegateTaskListComponent}])
export class DelegateUserComponent {...}
#Routes([{path: 'edit', component: EditTaskListComponent}])
export class DelegateTaskListComponent {...}
Each of the DelegateXComponents were responsible for resolving the respective document and making it available in a Service the other components get injected. Moreoever, all of the DelegateXComponents rendered a little template with some data of the documents they were in charge of.
How is this done with router v3 ? It makes no sense to map the entire tree in a nested RouterConfig with 5 levels of children. On the other hand, do separate RouterConfigs work at all?
export const clubRoute: RouterConfig = [
{ path: 'club/:id', component: DelegateClubComponent }];
export const userRoute: RouterConfig = [
{ path: 'user/:id', component: DelegateUserComponent }];
As long as there is no magic happening behind the scenes, how would the router know that the userRoute should be considered as a child route for clubRoute.
Confused greetings
You can define configs in the same files as the components and then just combine them to a complete tree before passing it to the router.
import {childRoutes} from './child.component'
export const clubRoute: RouterConfig = [
{ path: 'club/:id', component: DelegateClubComponent, children: childRoutes }];
http://fluxxor.com/examples/react-router.html#/
This shows how to do it for the old version of React-router.
Does anyone know how to pass flux as a prop to your top-level component in react-router 1.0.0?
I saw somewhere in the docs that in react-router 1.0.0 routes can just be described as objects and this means you can pass in arbitary props. However this isn't working for me:
routes =
path: "/"
flux: flux
component: App
childRoutes: [
{path: "/path/to/path", component: Comp, flux: flux}
]
React.render(<Router routes={routes} />, document.getElementById("app"))
No sign of flux as a prop on App.
The syntax is Coffee Script but basically routes is an object,
As stated here:
https://github.com/BinaryMuse/fluxxor/issues/137
You can pass a function to the Router createElement property which passes the flux property down to the children components.
const createFluxComponent = (Component, props) => {
return <Component {...props} flux={flux} />;
};
React.render(
<Router createElement={createFluxComponent}>
...
I wanted to build a Facebook login into my react/react-router/flux application.
I have a listener registered on the login event and would like to redirect the user to '/dashboard' if they are logged in. How can I do that? location.push didn't work very well, except after reloading the page completely.
React Router v3
This is what I do
var Router = require('react-router');
Router.browserHistory.push('/somepath');
React Router v4
Now we can use the <Redirect>component in React Router v4.
Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects.
import React, { Component } from 'react';
import { Redirect } from 'react-router';
export default class LoginComponent extends Component {
render(){
if(this.state.isLoggedIn === true){
return (<Redirect to="/your/redirect/page" />);
}else{
return (<div>Login Please</div>);
}
}
}
Documentation https://reacttraining.com/react-router/web/api/Redirect
React Router v0.13
The Router instance returned from Router.create can be passed around (or, if inside a React component, you can get it from the context object), and contains methods like transitionTo that you can use to transition to a new route.
React Router v2
Even though the question is already answered, I think it's relevant to post the solution that worked for me, since it wasn't covered in any of the solutions given here.
First, I'm using the router context on my LoginForm component
LoginForm.contextTypes = {
router: React.PropTypes.object
};
After that, I can access the router object inside my LoginForm component
handleLogin() {
this.context.router.push('/anotherroute');
}
PS: working on React-router version 2.6.0
React Router v3
Navigating Outside of Components
create your app with Router like this
// Your main file that renders a <Router>:
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'
render(
<Router history={browserHistory} routes={routes} />,
mountNode
)
Somewhere like a Redux middleware or Flux action:
import { browserHistory } from 'react-router'
// Go to /some/path.
browserHistory.push('/some/path')
// Go back to previous location.
browserHistory.goBack()
react-router/tree/v3/docs
React Router v4.2.0
I am using React-16.2.0 & React-router-4.2.0
And I get solution by this code
this.props.history.push("/");
My working code:
.then(response => response.json())
.then(data => {
if(data.status == 200){
this.props.history.push("/");
console.log('Successfully Login');
}
})
I was following this document redirect-on-login-and-logout
I was also try by return <Redirect to='/' /> But unlucky, this not working for me.
React router v5 using hooks
These steps are for authorisation redirect. But can be used for login/logout redirection also.
The <Redirect/> accepts to prop as a string or an object. We can utilise the object to pass the redirection path after login/logout using hooks easily.
Get the pathname of url from where the <Redirect/> is called using
useLocation()
const {pathname} = useLocation()
In the to prop of <Redirect/> pass in the following object:
<Redirect to={{pathname:'/login',state: {referrer: pathname}}/>
In the Login component access the route state variable using useLocation() hook and use the useHistory() hook to redirect after successful login.
const history = useHistory();
const location = useLocation();
const login() => {
// After login success
const {state: {referrer}} = location;
history.push(referrer)
};
Check the official docs here
React Router v3
Navigating inside components
You should use withRouter decorator when it's necessary to redirect inside a component. The decorator uses context instead of you.
import {withRouter} from 'react-router'
fucntion Foo(props) {
props.router.push('/users/16');
}
export default withRouter(Foo);
withRouter(Component, [options])
A HoC (higher-order component) that wraps another component to enhance
its props with router props.
withRouterProps = {
...componentProps,
router,
params,
location,
routes
}
Pass in your component and it will return the
wrapped component.
You can explicit specify router as a prop to the wrapper component to
override the router object from context.
In your store:
data.router.transitionTo('user');
And router has:
"Route name="user" handler={User}"
User is route handler