In React router 3 I could have path like this:
/root(/id/:id)(/di/:di)
That would match
/root
/root/id/1
/root/di/2
/root/id/1/di/2
Perfect.
I can't figure out how to do it in React Router 4. All examples are doing only one thing.
Using Express Route tester I can come up with a route like
/root/id/:id?/di/:di?
But that would match only
/root/id/1/di/2
Is there a solution for this?
In react router v4 you can enclose your regex inside (). So this regex should work and match all the paths you gave : /root(/id/|/di/):id*(/id/|/di/)?:di*. In the Express router Tester tool that you gave the link to, the keys wont show up with this regex but it does work, I tested on localhost and keys works just fine.
Note that I didn't use ? after first capturing group, i.e., (/id/|/di/) because if I did then it would become optional and then path like /root/12 would be matched too.
Here's how I did it in the end, it's a litte bit ridiculous but it works:
<Route
path="/root/:firstKey?/:firstId?/:secondKey?/:secondId?"
render={({ match: { params: { firstKey, secondKey, firstId, secondId } } }) => {
const params = { [firstKey]: firstId, [secondKey]: secondId }
return (<Whatever {...params} />)
}}
/>
Related
I'm working with Docusaurus to create a documentation site for 3 different education courses - all within the docs folder.
So I'm looking for a way to have the version be different across folders in there, or figure out what the best strategy for this is.
Right now, in my docusaurus.config.js I have:
module.exports = {
presets: [
'#docusaurus/preset-classic',
docs: {
lastVersion: 'current',
versions: {
current: {
label: '1.0.0',
path: '1.0.0',
},
},
},
],
};
But I'm not sure how to keep track of 3 different versions across 3 different docs all within the same site.
Swizzle the navbar via wrapping
yarn run swizzle #docusaurus/theme-classic NavbarItem/DocsVersionDropdownNavbarItem -- --wrap
Modify the swizzled component like so:
src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js:
import React from "react";
import DocsVersionDropdownNavbarItem from '#theme-original/NavbarItem/DocsVersionDropdownNavbarItem';
import { useLocation } from '#docusaurus/router';
export default function DocsVersionDropdownNavbarItemWrapper(props) {
const { docsPluginId, className, type } = props
const { pathname } = useLocation()
/* (Custom) check if docsPluginId contains pathname
Given that the docsPluginId is 'charge-controller' and the routeBasePath is 'charge-controller', we can check against the current URI (pathname).
If the pathname contains the docsPluginId, we want to show the version dropdown. Otherwise, we don't want to show it.
This gives us one, global, context-aware version dropdown that works with multi-instance setups.
You want to declare a version dropdown for each plugin in your navbarItems config property for this to work well.
const doesPathnameContainDocsPluginId = pathname.includes(docsPluginId)
if (!doesPathnameContainDocsPluginId) {
return null
}
return <DocsVersionDropdownNavbarItem {...props} />;
}
For this to work, you need to have your documentation (based on products) split up using multi-instances: (https://docusaurus.io/docs/docs-multi-instance#docs-navbar-items)
Note that the preset docsPlugin ID always is "default".
You can try to use
import {
useActivePluginAndVersion,
} from '#docusaurus/plugin-content-docs/client';
const version = activePluginAndVersion.activeVersion.name; // use label instead of name if issues arise.
instead to get the current docsPluginId, name or label.
This would be the more "robust" solution I think. That said, we do use the solution I provided above as-is and it works fine for now.
I have a very simple 'named' Nuxt middleware set up (taken from the docs) which checks in the store to see whether a user is authenticated before they can navigate to certain routes. If the user is not authenticated, they are directed to a straightforward form in which they have to provide an email address to gain access (at http://example.com/access). All of that works fine, after they fulfil the middleware's store.state.authenticated check they can navigate around no problem.
export default function ({ store, redirect }) {
if (!store.state.authenticated) {
return redirect('/access')
}
}
My question is, once the user has entered their email address, I have no way of knowing what route they were initially trying to access. I've looked at other questions here about passing data between routes but because of the way the middleware works these solutions don't seem to be feasible.
I really would rather not set the slug in the vuex state as this will lead to a whole other set of complications – I also don't mind setting the intended slug as a query or a param on the /access url. I have read through the docs for the Nuxt redirect function and realise you can pass a route.query as an argument. So it seems that you could potentially do something like this:
return redirect('/access', intendedSlug)
...or, if using params(?):
return redirect(`/access/${intendedSlug}`)
But I don't know how to pass that intendedSlug value to the middleware in the first place as it's not exposed on the context passed to the function or anywhere else. It seems like this would be a common problem, but I can't find any simple solutions – any help would be really appreciated!
To help #Bodger I'm posting how I resolved this, it may not be perfect and it's working on a slightly older version of Nuxt (I know 😵!) but this is how I resolved the issue.
.../middleware/authenticated.js
export default function (context) {
const path =
context.route.path.length && context.route.path[0] === '/'
? context.route.path.slice(1)
: context.route.path
const pathArray = path.split('/')
if (process.server && !context.store.state.authenticated) {
return context.redirect('/access', pathArray)
} else if (!context.store.state.authenticated) {
return context.redirect('/access', pathArray)
}
}
The pathArray is then accessible in my /access page.
.../pages/access.js
data() {
return {
attemptedRoutePathArray: Object.values(this.$route.query)
...
}
},
...
computed: {
attemptedRouteURL() {
return new URL(
this.attemptedRoutePathArray.join('/'),
process.env.baseUrl
)
},
...
}
I am working with react-admin and trying to traduce it to my native language with this short guide usage:
https://github.com/marmelab/react-admin/tree/master/packages/ra-language-french
I keep getting non-referenced keys on the supposed translated keys.
To get my traduction working, I tried to delete node-modules file, tested in other browsers, cleared cache etc. but I still had the non-referenced keys: ra.______
When I changed this line (as below), it solved my problem:
const messages = { 'fr': frenchMessages, };
TO
const messages = { 'en': frenchMessages, };
And that's the only thing that i needed to change for the polyglot to work (French traduction).
Can someone explain to me what's going on, i don't know why it works in that case ?
Example in picture which shows the case explained above:
Not working case
Working case
Thanks for your time.
The <Admin locale='fr' ... property is deprecated! New version:
import { resolveBrowserLocale } from 'react-admin'
...
const i18nProvider = polyglotI18nProvider(locale => messages[locale], resolveBrowserLocale()) // or 'fr'
I need to generate a vue-router link that contains an array with string keys as a query parameter.
I want the resulting URL to look like
url?param[key]=value
I need these kinds of query parameters to match an existing backend infrastructure, so renaming/refactoring them is not an option.
I've tried to use a router-link like the one below, but the param object just get's serialized as %5Bobject%20Object%5D. Maybe there is an option to change the way this object is serialized within vue-router?
<router-link :to="{name: 'xyz', query: {param: 'value'}}">link</router-link>
Does anyone have helpful input? Thank you :)
After spending some time vue-router GitHub issues and their docs, I figured it out.
When creating your RouteConfig, import qs and set the parseQuery and stringifyQuery methods as follows:
parseQuery: (query: any): object => {
return qs.parse(query);
},
stringifyQuery(query: any): string {
let result = qs.stringify(query, {encode: false});
return result ? ('?' + result) : '';
}
It is important to include {encode: false}, otherwise the square brackets will get URL encoded.
Addition to Martin's comment,
Exact Router config should be :
// https://github.com/ljharb/qs
import qs from 'qs';
const router = new Router({
routes: [
// ...
],
// set custom query resolver
parseQuery(query) {
return qs.parse(query);
},
stringifyQuery(query) {
var result = qs.stringify(query);
return result ? ('?' + result) : '';
}
});
and query parameters inside routes will be automatically converted url string and parsed as an object when accessing $router.query .
I'm trying to use vars in my Express routes. They work fine but after i use a variable in a route, any routes after that one will not work. Here's really simple example.
/////////////////////////////////////////////planets
router.get('/:planetID', function(req, res, next) {
if(req.params.planetID == "hoth"){
res.render('index', {
title: 'Hoth',
subtitle:"Damn its cold"
});
}
});
////////////////////////////////////////////////jedi
router.get('/jedi', function(req, res, next) {
res.render('characters', {
title: 'Jedi',
subtitle:"why the f is this happening?",
});
});
In this example, the jedi route doesnt render anything. But if i put the jedi route before the planet route, everything works fine. Has anyone encountered this before?
Many thanks in advance for any help.
Express routes work in a pipe, that means that it will first check the first route and it will see that it accepts a parameter and it cannot see any difference between "/23423423" and '/jedi'. It assumes that jedi is an ID aswell. you should prefix it with
/planet/:planetID
for them not to conflict each other.
Express uses path-to-regexp for matching the route paths; see its documentation for all the possibilities in defining route paths. Apart from that, when you are working in express middle wares, do take care of the order of middle wares defined.
Note : Router is also a middleware in Express.
So you are working with two routes :
/:planetId
/jedi
If you define route /:planetId at the top then it actually treats /jedi as the same route with value of param planetId = jedi, whereas if you place your second route i.e.; /jedi at the top then it goes for exact match condition and if it find /jedi then only it executes the corresponding action else it will try with other routes defined.
ahh ok scopsy, now I see how your /23423423 example applies. Im sorry guys, I didnt post enough info I'm realizing. I had to use an if() statement to tell the route to move on if it didnt find a match. I did this using the next() function and a counter var.
router.get('/:planetID', function(req, res, next) {
var counter = 0;
planetJSON.planets.forEach(function(item){
counter++;
if(item.link == req.params.planetID){
planetDisplay.name = item.name;
planetDisplay.text = item.text;
planetDisplay.image = item.image;
res.render('index', {
planetGrab:planetDisplay,
planetList:planetJSON
});
}//end if()
else if(counter + 1 > planetJSON.planets.length){
next();
}
});//end for each()
});//end router.get
thanks again for your help