I've begun working on a rather large react project in which a large upgrade to the libraries is required.
Most migrations for non-supported libraries has gone smooth, but the combination of react-redux and react-router v4-5 is could cause a bit of issue, due to the initial implementation of plain routes (in combination with a fractal design pattern)
In the meantime, I have migrated to react-router v3.2.3 as it handles the newer version of react-redux. However, this is just moving the goal post.
Here is an example of the nested routes
export const createRoutes = (store) => ({
path : '/',
indexRoute : { component: AuthLoginContainer },
childRoutes : [
DashboardRoute(store),
SettingsRoute(store)
]
})
// DashboardRoute index.js
export default (store) => ({
path : 'dashboard',
indexRoute: { component: DashboardContainer },
component: isAuthContainer(BaseLayout),
childRoutes: [ ProfileRoute(store) ]
})
// ProfileRoute index.js
export default (store) => ({
path : 'profile',
indexRoute: { component: ProfileContainer },
})
The example on https://reactrouter.com/web/example/route-config seems to work somewhat, but I'm unsure how to implement a similar pattern with the newer version of react-router
Any tips on how to even begin to tackle this (if possible) or how similar patterns are implemented in react-router5 would be appreciated.
I'm hoping it's not a full rewrite as the fractal design with these routes is pretty baked into the application
Related
With Ant Design Pro v4, when init project, by choosing the option complete scaffolding, you'll get the Setting Drawer out of the box.
But in v5, you won't be able to select the complete option (you can refer to this demo video, no Do you need all the blocks or a simple scaffold there), and the default scaffold of v5 has no SettingDrawer.
How to enable it in Ant Design Pro v5? I've read this but not helpful because in v5 the Layout configuration code is quite different from v4. You may init the project in v5 here and v4 here to see what I mean by "quite different".
In And Design Pro v5, use various features by umi plugins. As for this feature, /src/app.tsx should like below:
// /src/app.tsx
import type { RunTimeLayoutConfig } from 'umi';
import { SettingDrawer } from '#ant-design/pro-layout';
import defaultSettings from '../config/defaultSettings';
// https://umijs.org/zh-CN/plugins/plugin-initial-state
export async function getInitialState() {
// ...
return {
// others state
settings: defaultSettings,
}
}
// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
return {
// others props
childrenRender: (dom) => {
return (
<>
{dom}
<SettingDrawer
settings={initialState?.settings}
disableUrlParams
onSettingChange={(nextSettings) =>
setInitialState({
...initialState,
settings: nextSettings,
})
}
/>
</>
);
},
}
}
I'm trying to make a React route path dynamic and for this I need to send a variable clickedSubprojectName to my routes.js.
right now my routes.js looks like this:
import React from 'react';
const Projects = React.lazy(() => import('./views/Projects'));
const Subproject= React.lazy(() => import('./views/Subproject'));
const routes = [
{ path: '/projects', exact: true, name: 'Projects', component: Projects },
{ path: "/projects/subprojects", name: 'Subproject', component: Subproject},
];
export default routes;
In my Projects.js I created a state variable which saves the name of the subproject where the user clicked on. And I want to pass this variable from my Projects class to my routes.js so that I can set the path in routes for example like this:
{ path: "/projects/"+clickedSubprojectName, name: 'Subproject', component: Subproject}
I've already tried to export a constant variable from my Projects.js like this:
export const clickedSubprojectName={
clickedSubprojectName: this.state.clickedSubprojectName}
and then imported import { clickedSubprojectName} from './views/Subproject' in my routes.js
but this isn't really working. This sets the clickedSubprojectName as the default of the state variable at the first time when the Projects component gets rendered and it doesn't get updated when the state variable changes.
Hope anyone have a solution for this problem because I haven't found anything on stackoverflow yet
Thanks
for dynamic routes.. you can use something like..
{ path: "/projects/:subproject", name: 'Subproject', component: Subproject},
and you can invoke this route by history.push("/projects" + this.state.clickedSubprojectName)
export const clickedSubprojectName={
clickedSubprojectName: this.state.clickedSubprojectName}
this definitely won't work.. this variable gets exported once and imported once. So it will always return the default value.
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
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!
right now migrating from router v2 to v3 (feels like a deja vu). The routing configuration is now decoupled from the components again. It overthrows the logic I considered quite sensible. They have introduced a children property in the RouterConfig which gives me headache. Assume an application with many routes similar to this
/club/123/member/98/tasklist/921/edit
The route was spread over the following components with the following #Routes decorators
#Routes([{path: '/club/:id', component: DelegateClubComponent}])
export class MainApp {...}
#Routes([{path: 'user/:id', component: DelegateUserComponent}])
export class DelegateClubComponent {...}
#Routes([{path: 'tasklist/:id', component: DelegateTaskListComponent}])
export class DelegateUserComponent {...}
#Routes([{path: 'edit', component: EditTaskListComponent}])
export class DelegateTaskListComponent {...}
Each of the DelegateXComponents were responsible for resolving the respective document and making it available in a Service the other components get injected. Moreoever, all of the DelegateXComponents rendered a little template with some data of the documents they were in charge of.
How is this done with router v3 ? It makes no sense to map the entire tree in a nested RouterConfig with 5 levels of children. On the other hand, do separate RouterConfigs work at all?
export const clubRoute: RouterConfig = [
{ path: 'club/:id', component: DelegateClubComponent }];
export const userRoute: RouterConfig = [
{ path: 'user/:id', component: DelegateUserComponent }];
As long as there is no magic happening behind the scenes, how would the router know that the userRoute should be considered as a child route for clubRoute.
Confused greetings
You can define configs in the same files as the components and then just combine them to a complete tree before passing it to the router.
import {childRoutes} from './child.component'
export const clubRoute: RouterConfig = [
{ path: 'club/:id', component: DelegateClubComponent, children: childRoutes }];