Comments (7)
Well, I guess the two main options here are:
- Using the
UISref
component (available only if the transition must occur when the user clicks something):
render () {
return (
<UISref to="mystate">
<a>My state</a>
</UISref>
)
}
- Simply "pass down" the function, or even better, call it from the parent:
navigateToMyState () => {
const {stateService} = this.props.transition.router;
stateService.go('mystate');
}
render () {
return (
<Child onNavigate={this.navigateToMyState} />
)
}
This way Child
doesn't know about the router or how to navigate, it just needs to have a onNavigate
prop which should be called when necessary. It's the (routed) Parent
that takes care of navigating using the injected transition
. This way you are separating concerns between the routed component and the "dumb" child components.
from react.
Gotcha, I passed down the function to the child and when try using the stateService.go
I receive this error:
Transition Rejection($id: 0 type: 6, message: The transition errored, detail: SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://dashboard/' cannot be created in a document with origin 'http://localhost:8000' and URL
'http://localhost:8000/'.)`
stateService.ts:527 Error: Failed to execute 'pushState' on 'History': A history state object with URL 'http://dashboard/' cannot be created in a document with origin 'http://localhost:8000' and URL 'http://localhost:8000/'.
The code will route to the state but the url doesn't change to the states url.
from react.
Resolved the issue by adding the plugin: hashLocationPlugin
from react.
Wait, you weren't using a location plugin or did you simply change it from pushStateLocationPlugin
? Because it should work with every location plugin.
Can you please show me your state declaration code? Because it looks like there's something off with the url
there as it tries to completely replace the url from localhost:8000
to dashboard
and the browser prevents it since the origin domain is different.
I guess you meant it to change to localhost:8000/dashboard
when navigating to that state.
from react.
This is my state declaration:
export const DashboardState: ReactStateDeclaration = {
name: 'dashboard',
url: '/dashboard',
component: Dashboard,
data: {
authenticate: true
}
};
Here is my router config:
export const states = [Signup, Login, Dashboard];
export const plugins = [
servicesPlugin,
hashLocationPlugin
];
export const config = (router: UIRouterReact) => {
// Hook for if route is not registered.
router.urlRouter.otherwise({ state: 'login' });
router.transitionService.onBefore(
{
to: (state) => state.data && state.data.authenticate
},
(transition) => {
let user = new UserService();
let $state = transition.router.stateService;
if (!user.isAuthenticated()) {
return $state.target('login', undefined, { location: false });
}
},
{ priority: 10 });
trace.enable(1);
};
Here is how I am initializing the UIRouter. ()
<UIRouter plugins={plugins} states={states} config={config}>
<div className="app-container">
<UIView />
</div>
</UIRouter>
Here is the ReactDOM render...
ReactDOM.render(
<Provider {...stores}>
<App />
</Provider>,
document.getElementById('root')
);
from react.
Still not sure, but I can see you are adding the servicesPlugin
to the router while initialising it via the component and you shouldn't. The servicesPlugin
is applied by default by the <UIRouter>
component, and it's needed only if you want to bootstrap the router manually.
You haven't said if the fix by adding the hashStatePlugin
was from not having a location plugin at all or by switching from the pushStatePlugin
. Do you get the same error if you use pushStatePlugin
instead?
from react.
As this issue is a bit old, it is being closed. If you feel like the problem reported is still valid, please add a comment saying it is still affecting you. We will reevaluate it and if it is valid we will reopen it.
Thank you for supporting and contributing to the project.
from react.
Related Issues (20)
- Can ui-router/react support React18 new features? HOT 6
- testing ui router with relative paths
- {location: 'replace'} doesn't work in stateService.go(stateName, params, {location: 'replace'}) HOT 1
- useSref: "target="_blank" ignored when link contains child elements HOT 1
- Is this project still under active development? HOT 3
- Use same UIRouter instance inside different React.render(...) HOT 1
- Typescript demo errors on `1.0.1` HOT 1
- animating-transitions demo errors on `1.0.1` HOT 1
- Router.start() called more than once HOT 1
- 404 on react-dom.js on the tutorial pages HOT 2
- Path duplication after page refresh when using UIRouter pushStateLocationPlugin HOT 4
- Params of type json are not deserialized properly HOT 5
- States not gets enabled if there are nested lazy loaded states HOT 2
- UIView Doesn't Render with Usage of `urlService.rules.when` HOT 4
- Scroll restoration HOT 3
- Cannot use useRouter HOT 4
- Jest/Enzyme Transition Rejection/TypeError HOT 1
- UISref Component ignores target="_blank" on child anchor tag HOT 3
- Mocking UiRouter Classes with Jest HOT 4
- useCurrentStateAndParams don't reacting on initial state HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.