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
Related
So I have this routes.ts file where I've stored all the routes of my React app that I created with create-react-app. The routes get imported whenever I need to insert some route-related data.
tl;dr Webpack has no issue with a module elsewhere but says it's undefined at one spot.
Here's all the information you need to help me out 🙂
routes.ts
import { Route, PageName } from ".";
...
const routes: Record<PageName, Route> = {
landing: {
PATH: "/landing",
BASENAME: "landing",
TITLE: env.app.NAME,
Page: Landing,
},
...
}
Works fine everywhere else but here:
navbar-utils.ts
import { routes } from "../../config";
...
const navItems: NavItem[] = [
{
text: "Home",
icon: faHome,
to: routes.landing.PATH,
},
...
]
There is where Webpack loses it and keeps telling me that _config__WEBPACK_IMPORTED_MODULE_0__.routes is undefined.
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
const routes = [
{ component: Root,
routes: [
{ path: '/',
exact: true,
component: Home
},
{ path: '/child/:id',
component: Child,
routes: [
{ path: '/child/:id/grand-child',
component: GrandChild
}
]
}
]
}
]
routes.config.js export routes object using in renderRoutes method which is exported by react-router-config
when I start the app and access the url localhost:3000 the Home component will be rendered .
If access localhost:3000/child the request is 404.
If access localhost:3000/#/child but it render Home component instead of Child component
In the development mode I know can add devServer:{historyApiFallback:true}, but should I do in the production mode ?
If using HashRouter it works well.
So how can I using the BrowserRouter?
Try this:
Step 1: Wrap your <App /> inside <BrowserRouter />
Step 2: <Router path="/child" component={Child} />
Step 3: Point this router using <Link to="/CHILD>Child</Link>"
In react-router there's withRouter HOC that provides access to location.pathname
How can I get it in Universal Router?
history.location.pathname is only available in the browser so can't use that.
If you have universal routes like this:
const routes = {
path: '/page',
name: 'page',
parent: null,
children: [],
action(context, params) {
return '<h1>The Page</h1>'
},
}
(example from documentation https://github.com/kriasoft/universal-router/blob/master/docs/api.md). then you will have context.pathname inside the action. Hope it will help!