get pathanme in universal router - reactjs

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!

Related

react-router v3 - v5 PlainRoute migration

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

Send variables from one class to routes.js (without props)

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.

How to implement Protected Route using React Route Config

I want to implement Protected Routes using React Route config .
As I understand, you can now add render method in config
{
{
path: "/restricted-area",
render: (props) => isUserLoggedIn() ? <RestrictedArea/> : <Redirect to="/login"/>
},
{
path: "/login",
component: Login
}
}
https://github.com/ReactTraining/react-router/pull/6217
If anyone need this behavior, I recommend this protected-react-routes-generator
it will handle all the logic for you, you only need to provide the structure.

How to keep params with react-router v4?

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

Where did they get the router context

On the example folder of react-router where did they get the router context on Login.js. I'm very confused on this on. For reference, here's the link for the Login.js file.
I didn't see any variable declartion on router.
RouterContext has childContextType router
https://github.com/rackt/react-router/blob/master/modules/RouterContext.js#L36
childContextTypes: {
history: object,
location: object.isRequired,
router: object.isRequired
},
And login.js has this.
contextTypes: {
router: React.PropTypes.object
},
This is based on Context

Resources