navigate(`/dashboard`, { state: { stringData: "smart warehouse", id: passData } });
Iam using this method to pass datas to dashboard(parent route) and dynamically rendering some functions
refreshing with on the current dashboard its not losing data. but if we navigate to another page( to the child route)
making a refresh the 'state' data is losing and cant make execute function with using the state data
my route looks like
<Route path="/dashboard/" some elements...>
<Route.....elements />
<Route.....elements />
<Route.....elements />
</Route>
Iam using react-router and react. please suggest me some methods to do tgis functionality
Related
Instagram example
As in the image above, in the user profile page with a url(profile/:username), the user is able to click on one of his posts which opens a modal containing that specific post, the url thereafter changes to p/:postId but doesn't navigate to another page, it instead displays above the profile page without navigating to p/:postId
I'm trying to do the same in my app and I have tried doing stuff like history.push but it's not working and I assume this is happening cause of react-router.
To achieve the behavior you described, you can use React Router to manage the URL change and display the modal with the post content.
Define a route in your React Router configuration that corresponds to the modal content you want to display. For example
<Route path="/posts/:postId" component={PostModal} />
In your component, include a link to the new route with the post ID as a parameter.
<Link to={`/posts/${postId}`}>View Post</Link>
In your PostModal component, use the useParams hook to access the post ID parameter from the URL. Then, fetch the post data from your API or store, and display it.
import { useParams } from 'react-router-dom';
function PostModal() {
const { postId } = useParams();
// Fetch post data and display it in modal
}
After that, Use CSS to display the modal as an overlay on top of your existing content, and use JavaScript to show and hide the modal as appropriate.
I want to build an Inventory app, everything was smooth until i want to make a page with URL pattern like
http://localhost:8000/product/edit/1
So i have this route in my React Router
<Route path='/product/edit/:product_id' component={MyComponent} />
Im using Redux to handle the state and Axios to get the data.
The problem is when i call the API , it's calling an URL of http://localhost:8000/product/edit/api/get-product-by-id. Of course im not getting any data returned.
The question is how to setup the Laravel Route for this problem?
Here is my web.php file
Route::get('/{path?}', function () {
return view('index');
})->where('path', '^((?!api).)*?');
What's wrong with using this approach?
I hope this solves your problem.
Route::get('/product/edit/{id}', function () {
return view('index');
});
I need to know how react-router-dom persists state object, for example i have a route like this: 'http://localhost:3000/somepath/123', if i open this route on the new browser tab, state object is obviously undefined, if i redirected from somewhere to this route then state is an object from application state, this is completely normal... but the thing is, when i redirected from different route and i refresh the page several times the state is again an object, how react persist state even if i refresh the page?
<Link
to={{
pathname: '/somepath/:someid',
state: state.obj[someid]
}}
>
Link to somepath
</Link>
React-router-dom doesn't persist state. Browser does.
React router uses history API to push & pop states.
The behaviour you describe is how history.state works.
So after you refresh, browser keeps the history state.
Check History API
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 have sign in component, which should be available for unauthenticated users. And right after the authentication this component should become unavailable.
var routes = (
<Route handler={App}>
<Route name="signIn" handler={signIn}/>
{/* redirect, if user is already authenticated */}
{ localStorage.userToken ? (
<Redirect from="signIn" to="/user"/>
) : null
}
</Route>
);
Router.run(routes, (Handler, state) => {
React.render(<Handler {...state}/>, document.getElementById('main'));
});
This code works perfect if user have reloaded webapp for any reason after the authentication, but of course it doesn't if user didn't reload the webapp.
I've tried to use this.context.router.transitionTo right to the SignUp component, but it works awful - the component gets rendered, then this script is getting executed.
So I want to add the redirect right into the routes variable to make the router redirect without even trying to render the component.
Instead of checking your auth-flow and conditionally rendering particular routes, I would recommend another approach:
If you're using react-router 0.13.x, I would recommend using the willTransitionTo methods on your components when you need to check authentication. It is called when a handler is about to render, giving you the opportunity to abort or redirect the transition (in this case, check if user is authenticated, redirect to another path if not). See auth-flow example here: https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js
For versions >0.13.x, it would be onEnter and Enterhooks. See the auth-flow example here: https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js
Basically you move the auth-check flow away from your routes variable, and into transition events/hooks. Before the route handler actually gets rendered, check the auth, and redirect the user to another route.