I have a simple ionic app with an IonReactRouter
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu selectedPage={selectedPage} />
<IonRouterOutlet id="main">
<Route path="/new-user" component={NewUser} />
<Route path="/users" component={UserList} />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
When you navigate between new-user and users the corresponding pages (NewUser and UserList) are not unmounted:
According to this post this is by design
we need to control and keep pages around in the dom even if a user navigates away from them for page transition and state purposes
However I find that most end users expect clicking on 'New User' to show a fresh copy of the page. How can i make the page be unmounted OR achieve the same goal and 'reset' the page when a link is clicked?
You can use the Ionic Lifecycle events to reset the state of your form each time the user navigates to the new user page. IonViewWillEnter will fire each time the page is displayed, even though it is already mounted by React.
Check out the docs for usage information: https://ionicframework.com/docs/react/lifecycle
Try to add "key" to "IonRouterOutlet" component and update it on route changed.
An example for Vue:
<ion-router-outlet :key="route.fullPath" ></ion-router-outlet>
Related
I have set up a few pages that handle a new user account and edit profile functionality. After a user creates a new account on the SignUp page, they are immediately navigated to the AccountSetup page, which allows them to set up their profile and any additional information, such as About Me, Socials, Profile Photo, etc. Once they submit this page, they are then navigated to the UserProfile page. However, I want to limit the number of visits to the AccountSetup page to one visit, since a user should only have access to this route once after creating their account throughout the existence of their account. Additionally, I want to set up a conditional that if they try to navigate back to the AccountSetup path and they have already visited it once, they are automatically redirected to the EditProfile page.
My project is set up with React-Redux and Redux-Toolkit with Typescript.
<Router>
<Nav />
<Routes>
<Route path="/sign-up" element={<SignUp />} />
<Route path="users/:id/account-setup" element={<AccountSetup />} />
<Route path="/users/:id" element={<UserProfile />} />
<Route path="/users/:id/edit" element={<EditProfile />} />
</Routes>
</Router>
I was thinking of using a page navigation event in React, but not sure how I would implement it and set up a redirection to the EditProfile page if AccountSetup already had one visit
I'm new to react and I have some trouble re-rendering a component when I do my assignment.
On my navbar I have three links: Home, user and Courses.
If an user clicks on the "courses" (/courses?quick-courses=true#courses), the component will render and display the list of courses(the Links). If the user clicks on one of the Links such as "The Javascript"(/courses/3?title= Javascript) and then click the "Courses" (/courses?quick-courses=true#courses) from the navbar again, the content from the "courses" component will not be render again to display the list of course content.
I tried to use the shouldComponentUpdate() and componentDidUpdate() to assign the this.props.location.search to the state and many other ways to solve this issue. however it doesn't work for me.
Here's my components and what I did so far :components-assignment-3
Many thanks.
when you click /courses?quick-courses=true#courses you render this route <Route path="/courses" component={Courses} />
at this point, that route is loaded and mounted
then you click /courses/3?title= Javascript and you render <Route path={"/courses/:id"} exact component={Course} />
now clicking on /courses?quick-courses=true#courses won't re-render <Route path="/courses" component={Courses} /> again as it's already rendered, you're already inside of this route. that's why none of you lifecycle hooks will fire again and your showCourse will be false so that's why you won't see headerCheck
Here is my Sandbox code https://codesandbox.io/s/wispy-glitter-spgch?file=/src
what i am trying to do is on click of LOGIN Button trying to rendering the Dashboard page the url does go to the path '/dashboard'but do not render anything
I am not able to find the error
I have done routing in a component and passed that component inside of Context API
On page refresh i.e. in '/dashboard' dashboard section it again goes to login part how to maintain this with state
Use exact parameter in protected route like this:
<ProtectedRoute
path="/dashboard"
exact
auth={authState.isAuthenticated}
component={Dashboard}
/>
I have React application which has a structure similar to the following.
class App extends Component {
render() {
return (
<div className="App">
<NavBar />
<Router>
<Switch>
<Route path="/login" component={LoginPage} />
<Route path="/" exact component={DashboardPage} />
<Route path="/admin" exact component={AdminPage} />
// many other routes
<Route component={NotFound} />
</Switch>
</Router>
</div>
);
}
}
I do not want the login page to display the <NavBar /> element. I tried using the sessionStorage to get the userId and only display the navigation if the value is set. When I do this and go to the login page and the nav bar is not there. But when I log in, it's still not there. If I refresh however, it will appear.
I know one way to solve this is to make some sort of wrapper around the pages that do want the navigation, but I'd rather not have all of that code duplication, etc.
I feel this must be a common want, and I'm missing something dumb. Any help would be appreciated. I'm new to React so I don't follow everything that's going on here. Thanks.
I think your way of conditionally showing the NavBar is the right way. The question is how to trigger a state change so that the render method takes care of hiding and showing the NavBar, when you log in and out. I suggested maintaining a isLoggedIn state in your App component, and rendering the NavBar based on that, instead of directly accessing the SessionStorage. You could then use a custom event to update the state, when SessionStorage changes.
See this question for updating state based on Storage (in short, you fire and handle a custom event for storage changes): How to listen to localstorage in react.js
This might still be more code that you had hoped for, but it's more aligned with how React works, to derive the view (render) from component state.
I have a simple react app I'm working on that utilizes react router. My apps starts out of app.js and has the following router setup in app.js:
<BrowserRouter>
<MuiThemeProvider theme={theme}>
<NavigationBar onLogout={self.userLoggedOut} loggedIn={self.state.loggedIn} />
<div className="content-area container-fluid">
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/login" component={LoginPage} />
<Route exact path="/page1" component={Page1} />
<Route exact path="/page2" component={Page2} />
</Switch>
</div>
</MuiThemeProvider>
</BrowserRouter>
In my app.js constructor, I have console.log to fire off a message to say the constructor was called. Initially I see the message fire off when first coming into the app and then if I use links to navigate between pages I do not see any follow up messages. However, if I go the browser address bar and type in a url manually (http://localhost:3000/login for example), the page loads successfully but have the message from the app.js constructor fire off again. How do you get a react/react-router app to accept manually entered urls the same as links so that the app doesn't reload?
In my app.js constructor, I have console.log to fire off a message to
say the constructor was called. Initially I see the message fire off
when first coming into the app and then if I use links to navigate
between pages I do not see any follow up messages
This is the general behaviour of react app. Very first time you call the link the your app.js enters the tree and it gets rendered. While rendering all lifecycle method including constructor fires in fixed sequence so you are able to see log but when you are changing the link then the component corresponding to route inside is unmounted and component related to new route is rendered and not the complete app.js. This is why you do not see log again.
How do you get a react/react-router app to accept manually entered
urls the same as links so that the app doesn't reload?
You cannot do so because when you are explicitly entering url in address bar then your browser doesnot relate the url with the running web application. It will always render your web application from the beginning. So when it is rendering from beginning you will always get that log.