Develop Reference

React: How form submit refreshes page and come back to the original route?

I am displaying tree component in the left and add_category component in the right part of page. tree node click route to different components on the right.
on page load, page is http://localhost.com
first node click route to http://localhost.com/add_category
second node click route to edit_category
How form submit in add_category refreshes the page and come back to the original route/location http://localhost.com/add_category ?
Please find the sandbox: https://codesandbox.io/s/shy-snow-nfce4i
thanks

for submit handler event you have to use event.preventDefault()
that will stop refresh the page you will notice in your address it shows extra things to use preventDefault and then use
const history = useHistory();
history.push("/home");

useEffect and Document Title Update

I am using react helmet async for changing my document title. The problem is,
my home page is at route /home and on button link it will take the use about page. The about component is being rendered but the problem is my document title in browser is still the same.. When i reload the page, it shows About as document title but when coming from home component.
So i found a solution using Hooks.
useEffect(() => {
document.title = "About Page";
}, []);
But what i need to know is should i run the clean up function wherever i call this use effect Hook.

How to go to another tab in the current page after some onClick Action

I have some 2 tabs in the current page of the React App , I by default land on on one of the tabs , after completing some action in one tab how to another tab that lies in the same page without the user manually clicking on the required tab.
ReactRouter and Redirect ,also Link just goes to another tab or stays in same page and rerenders on same page . I don't want a rerender on the complete page, just want to go to that component within the same page and render that again that lies under a Tab
Inside Tab1 ----
react component......
handleClick() {
//Goto Tab2
}
} key="button" style = {{border: '1px solid black'}} />
Just want to navigate to the tab2 onClick(inside tab1) that exists on the same page without the whole page rerendering or going to another page

How to update route without re-rendering page (opening / closing a modal that has its own route)?

In my routes I have set-up a slug for a particular route like so:
Main route: /members
Sub route: /members/:slug
Now when I go to www.website.com/members/some-slug
I will try to detect whether there's a slug or not with:
if (this.props.match.params.slug) {
// If have slug, open a modal window with data that corresponds to that slug
this.showModal(this.props.match.params.slug);
}
What's happening is that showModal will change the state of a Modal component to true (thus reveal it) and also trigger an API call to get the details pertaining to the slug parameter that's passed (e.g. the slug sarah-smith is used for a GET request as a param to get Sarah Smith's details).
So all of these are fine so far. However, the issue is the re-rendering of the page when I either:
Open the modal
Close the modal
We have transitions for each element on the page so if you visit a route, the elements will have a subtle fade-in transition.
When a modal is clicked what I do is (member.name being the slug):
<Link
to={`/member/${member.name}`}
</Link>
Which causes a re-routing hence you can see those small transitions in the background while the modal is fading into view (as if I am opening /member/slug for the first time).
Same with the modal close button, if I click on it, what I do is invoke:
closeModal() {
this.props.history.push("/member");
}
Which re-renders the entire page /member page and not just close the modal. I can't just use this.setState({ showModal: false }); since that wouldn't change the route back to /member.
Is there a way to resolve this? Or another way of doing it so that the page doesn't re-render while changing the URL?

You can wrap your modal in route like this.
Modal
Then this.props.history.push("/path");

I think React-Router docs already have such examples. You can check following
https://reacttraining.com/react-router/web/example/modal-gallery.
There is npm module available as well https://github.com/davidmfoley/react-router-modal

Cannot set initial url for main-view

For the app I'm making, when the user first enters the app, the default home page is loaded (let's call it index.html). After the user signs in, they are routed to another page of the app (let's call this feed.html).
When the user leaves the app and decides to come back later, but is still logged into the app, I want the user to automatically see feed.html when the app loads, rather than index.html.
Is there any way I can do this? I have tried changing the default url dynamically and in the html as indicated here, but index.html keeps loading instead of feed.html.
Thanks in advance.
UPDATE:
var mainView;
if (localStorage.getItem("isLoggedIn") !== null){
// If already logged in
mainView = myApp.addView(".view-main", {
url: "feed.html"
});
}
else {
mainView = myApp.addView(".view-main", {});
}
So this is my code. According to the documentation, setting the url parameter when instantiating the main view should set the default url of the page to load when the view loads, but feed.html doesn't load.
Before this, I would forward the user to feed.html after index.html loads using the router:
mainView.router.load({
url: "feed.html"
});
but I would rather have the user land on feed.html instead of index.html if possible.

I have use previous version of framework7. its solve the problem