I have a container div with some static HTML. I don't want my react router to do anything if default location is /. It expects a default view which I don't have. Is there an easy solution.
I tried this but it doesn't work with back/forward browser button?
var initApp = function() {
Router.run(routes, function(Handler) {
if(Router.HashLocation.getCurrentPath() !== '/') {
React.render(<Handler/>, document.getElementById('top-container'));
}
});
}
Seems hacky to suggest - but have you tried passing a mocked component (not inheriting from React.Component) with a no-op render: function() {}? Otherwise, I think React will replace your wrapper's innerHTML.
On the other hand - are you rendering server-side? If so, the output of a "dumb" component handler for '/' which prints the same markup as your container currently holds, would quite literally be static HTML anyway, despite being rendered by React.
Related
I have troubles with ui-router and angularjs scope after changing state - new created scope uses old controller (or vise versa).
I use AngularJS "angular": "1.5.8", and ui-router "#uirouter/angularjs": "^1.0.22", components written in ES6 style as classes.
Component example:
import template from './my-container.html';
export const MyContainer = {
bindings: {
},
template: template,
controller: class {
constructor($scope) {
'ngInject';
this.$scope = $scope;
...
Route/State definition:
.state('mystate', {
url: '/mystate',
component: 'myPage' // in myPage <my-container>
})
Problem:
On first page load everything works correctly. But when I change state and go back - any changes don't appear in template.
I mentioned that $scope.$id was changed but my controller still use previous scope object.
For debugging I added two console prints: inside onInit and myUpdateData functions.
On first screenshot we can see correct ids (init, update func, from template/dom element):
And after changing states (wrong behavior):
future calls updateData - it uses old (14 on scr) scope but rendered new one. So we don't see any changes in template.
Any ideas how to find out from this situation?
Solved.
Issue was in components code - I forgot to remove all references on previous controller instance and after changing state this controller left alive in memory (I'm not sure how it has been connected to new scope object but it describes solution).
When you got behavior like this - try to leave almost empty component and you will find bug.
I have the following route:
<Route path="/cases" component={Cases} />
This route handles the following example paths
/cases
/cases/1
I have an iframe in this route that is responsible for handing all user interactions. On a location change in the iframe, the iframe posts a message to the parent window notifying it that the url has changed.
I want to be able to change the route in the parent window without re-rendering the iframe.
This is my current solution
this.props.history.replace(pathnameFromIframe);
shouldComponentUpdate = () => {
return false;
}
This solution works but it goes against the React docs:
shouldComponentUpdate ... method only exists as a performance
optimization. Do not rely on it to “prevent” a rendering, as this can
lead to bugs.
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Can I solve this some other way?
Is it perhaps possible to change the route without adding the route as a prop in the component? This would solve the problem I believe.
i think hashHistory what u need? if im not mistaken
import { hashHistory } from 'react-router';
hashHistory.push({
pathname:"/url-url",
});
I am using react-router 2.4.0 and I am trying to pass in some state to my route on a click event. It passes in pathname and query correctly but state is null.
Below is my handler function
clickHandler: function() {
var navigate = { pathname: '/view/report',
query: { filter: "filter-val"},
state: {"field": this.state.field}
}
this.props.router.push(navigate);
In my component that renders the route, inside getInitialState I am trying to access the state but it comes up as null.
I logged the this.state.field and it is present after the button press but before routing. I also logged this.props.location inside thegetInitialState of the routed component and it has non-null values for things like query, pathname, etc. but state (this.props.location.state to be specific) shows up as null.
Is there something special I need to do to set an object inside state of the router's location?
v2.4.0 is an old version. While I'm not aware of any reason why this would be causing your error, it might help to try upgrade to v3 (just v2 with v1's deprecated code removed).
I am trying to mount a react component using jquery to a bootstrap modal body and then open the modal after a successful ajax request, however I cannot seem to get the react component to load. This is what I have so far:
After success I am calling the assignModal function, I am inside a parent react component.
assignModal: function(){
$('.assign-modal-body').html(<Cortex.VulnerabilityList.AssignModal parent={this}/>);
$("#vuln-assign-modal").modal('show');}
And here is the react component
Cortex.VulnerabilityList.AssignModal = React.createClass({
componentDidMount: function() {
console.log("Component mounted")
},
render: function() {
return (
<h1>Hello</h1>
)
}
});
From my experience, you're going to have trouble if you try to use both jQuery and React to manipulate the DOM. If it's at all an option for you, get rid of jQuery and fully embrace React's declarative programming paradigm.
But maybe you have jQuery widgets you want to use. In that case, try and design your app in such a way that jQuery never writes to the DOM within your React tree.
So a few options:
Use jQuery and React, but separately - Have your React app descending from some root <div> and have your modal in a sibling <div>. Then just use jQuery and normal HTML to render your modal without involving React.
Stop using jQuery - Use React to manage your modal. So instead of responding to assignModal by setting the innerHTML of a DOM element with jQuery, simply set some global state to showModal = true and in the render method of the modal if (!showModal) return null or something like that. I wrote a post about this recently.
I'm trying to build a React app, and getting some trouble with React Router.
First of all, my url always has some weird hashstring at its' end.
For example:
http://localhost:3000/#/?_k=gb3epe
Also, I'm not sure whether the hashtag in the url and the following gibberish are part of the same problem or if they're related to 2 different problems. (I'm currently using React-Router v1.0).
Secondly, I think that the weird URL is preventing me from using the "action" property on forms, and would also like to know if there is a better way to move around React renders then relaying on forms.
Thanks.
If we're talking about react-router v1.0, then to remove this hash string you should pass a { queryKey: false } parameter to the createBrowserHistory function.
var createBrowserHistory = require('history/lib/createBrowserHistory');
ReactDOM.render(
<Router history={ createBrowserHistory({ queryKey: false }) }
routes={ ReactRoutes } />,
document.getElementById('some-container')
);
To move between routes react-router provides Link component which you can use inside your components.