I've 3 components
App Component
Login Component
Dashboard Component
App Component
The app component is the main component for the component tree. This component also holds the basic layout which consists of a header and a wrapper for the content.
<div class="container-fluid">
<navigation routes="$ctrl.routes"></navigation>
</div>
<ui-view></ui-view>
Login Component
The login component is a component which renders the login form and does it magic.
Dashboard Component
The dashboard component renders user data.
States
{
name: 'app',
url: '',
abstract: true,
component: 'appComponent',
resolve: {
routes: () => Routes
}
},
{
name: 'app.login',
url: '/',
label: 'Login',
data: {
navigations: ['navbar-no-user']
},
component: 'loginComponent',
resolve: {
redirectUrl: () => 'app.dashboard'
}
},
{
name: 'app.dashboard',
url: '/',
label: 'Dashboard',
data: {
navigations: ['navbar']
},
component: 'dashboardComponent'
}
Scenario
Visitor is loading the app, a navbar should be visible with only navbar-no-user items like login. Visitor logs in and becomes a user, now should see a navbar with only navbar items like dashboard.
Question
I am looking for a solution for this scenario, usually there was a onStateChange event and i could use this inside a controller. The only option i see now available is to render the navigation in each component specific.
I usually introduce an intermediate/parent state to do this.
For example, I would define the following states:
app (abstract)
app.login
app.main (abstract)
app.main.dashboard
app.main.home
and so on
If I wanted to only display a navigation for logged in users for example, my route templates would look like this:
app route template
<ui-view></ui-view>
app.main route template
<div class="container-fluid">
<navigation routes="$ctrl.routes"></navigation>
</div>
<ui-view></ui-view>
Related
I am trying to redirect my app on a condition. If it's login as a teacher then it must redirect to teachers profile otherwise it should redirect to student profile and if it's not login then it must redirect to login.
(() => {
if (isLoggedIn() !== "false")
AppRoutes.push({
path: isLoggedIn() === "teacher" ? "/tabs/home" : "/",
exact: true,
Component: isLoggedIn() === "teacher" ? TeachersProfile : ITCStudent,
});
else
AppRoutes.push({
path: "/",
exact: true,
Component: Login,
});
})();
This code is setting up the default component but i want to redirect to the profile page
Ionic React 5 and 6 are using React Router 5 (not React Router 6).
So one way is to redirect with useHistory().
const history = useHistory();
history.push('/redirect-path');
I'm not sure what AppRoutes is in your example, but if you have defined all your routes in , then you can just push to the path; you don't need to be passing the component.
I have several components. The main component is the PageTemplate.js, which describes the menu, search bar and site header. And also a place in the center for the content of other pages(functional components react).
The idea is to use the template(PageTemplate.js) on all pages of the site, since there is only one. And generate a block with content from other components (pages, ex. EditRecord.js, NewRecord.js etc).
I use a react-router and when going to /EditRecord, for example, my content block rendered edit's page(EditRecord.js) there
Now I have done it something like this:
Page transitions work and the content block generates the page I need.
but i have a huge problem. For example there is a page with a table with data(MainPage.js). And the search and search function are located in the template(PageTemplate.js). How can I transfer the state from the template(PageTemplate.js) to the page(MainPage.js) to change the data table there by search value from template? And also, if I, for example, will be on the other page(example on /NewRecord) and call teh search function in PageTemplate, then how can I tell the react, that now it is necessary to draw the main page(/) MainPage with new data by searched results?
Many thanks to all in advance;)
router code:
import { Main} from './pages/MainPage/Main';
import { EditRecordPage } from './pages/EditRecordPage/EditRecordPage';
import { NewRecord } from './pages/NewRecordPage/NewRecord';
export const routes = [
{
path: '/',
exact: true,
component: Main,
},
{
path: '/EditRecord/:id',
exact: true,
component: EditRecordPage,
},
{
path: '/NewRecord/',
exact: true,
component: NewRecord,
}
];
Code one of pages (they are identical except for the name):
import React, { useState, useEffect } from 'react';
import { PageTemplate } from '../../components/PageTemplate';
import { MainPage } from './MainPage';
export const Main = (props) => {
return (
<PageTemplate title={'Main page'} {...props}><MainPage/></PageTemplate>
)
}
Here is a chunk in the render of PageTemplate.js where the page(main, edit etc) is rendered:
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 280,
}
>
<div {...props}/>//here is the required page(main, edit, new etc)
</Content>
As im new to Reactjs it is hard for me to explain this, but I am trying to define all pages(components, routes and more) on a different page (routes.js) and looping this on the app.js page in order to build all pages/routes. But the imports of the pages are not working because I didn't defined them on the same page.
When I 'am not using the foreach the pages will load.
//app.js
import RC from './constants/Routes';
import {Page1,Page2,Page3} from "./components/pages";// not used here but set in route.js
<Switch>
{Object.keys(RC).forEach(key=>{
<Route path={RC[key].route} component={RC[key].component}/>
})}
</Switch>
//routes.js
export default Object.freeze({
PAGE1: {
route: '/page1',
component: 'Page1'
},
PAGE2: {
route: '/page2',
component: 'Page2'
},
PAGE3: {
route: '/page3',
component: 'Page3'
},
});
I'm building a react-native app for iOS and Android.
I'm using react-navigation to deal with routing and navigation as follows:
const AppDrawerNavigation = createDrawerNavigator({
Login: {
screen: Screens.Auth.Login,
path: '/login'
},
Register: {
screen: Screens.Auth.Register,
path: '/register'
},
Forgotten: {
screen: Screens.Auth.Forgotten,
path: '/forgotten'
},
Profile: {
screen: Screens.Profile,
path: '/profile'
}
})
And then I render this in React
export default class App extends React.Component {
render() {
return <AppDrawerNavigation persistenceKey="AppDrawerNavigationState2" />
}
}
Worked fine at the beginning but now when I navigate it sends me to the wrong page or refers to pages that I have removed.
This is happening because of the persistence. It is remembering routes that it has stored.
For safety, everytime you add, remove and/or change the routing, you should change the persistenceKey to erase the it's previous value and store again.
Example:
<AppDrawerNavigation persistenceKey="AppDrawerNavigationState" />
to
<AppDrawerNavigation persistenceKey="AppDrawerNavigationState1" />
I added a "1" at the end of my persistenceKey name
I have a React/Redux Universal application and I have recently added i18next to add internalization to my website.
In my react-router config, I have edited my routes:
const routes = [
{
component: App,
routes: [
{ path: '/:lng(fr|en)?/', exact: true, component: Home },
{ path: '/:lng?/about', component: About },
…
{ component: NotFound }
]
}
];
Everything works well, but I don't know how to keep the lng paramaters between my pages. Indeed, when I use <Link to="/about" >, I logically lost my params.
So, how to keep this parameter?
Thanks