J'essaie d'utiliser le matières graisses d'assurance-emploi avec réact-routeur. Comment puis-je détecter de manière programmative l'itinéraire actuel.
sur le site web matériels-UI, il existe un exemple sur la manière de l'utiliser, mais il nécessite l'utilisation d'un pain d'argent statique. J'ai déjà essayé de diviser le chemin de chemin en utilisant le hoc "withrouter" mais cela ne fonctionne pas. si l'URL de mon navigateur pointe de " home / niveau1 / niveau2 Si l'URL du navigateur serait " http: //example.com/level1/ ", je m'attendrais à: home / niveau 1 La traduction peut également être ajoutée plus tard. Je l'ai inclus pour montrer mon résultat attendu final.
3 Réponses :
Vous avez besoin de la chapelumMapplap uniquement si les étiquettes sur la chapelure sont différentes, les URL de liaison (par exemple, le chemin '/ Niveau1' est affichée sous la forme de «niveau 1» dans le fil d'ARRIGE.
Voici une version modifiée de l'exemple de matières d'alinéa Matériau intégré réagir du routeur.
Essayez le programme complet ici https://codesandbox.io/s/dark-architectecture-sgl12?fontSize=14
J'ai décidé de poster une réponse séparée au lieu d'un commentaire à votre code, Meera. Merci de votre aide. J'ai modifié la partie du corps de la fonction de carte et j'ai ajouté la capacité à traduire. Malheureusement, cela ne fonctionne pas pour moi avec la fonctionnalité de crochets de réaction, c'est donc pourquoi je l'ai converti en une composante de classe.
Mon composant ressemble maintenant à ceci:
J'ai édité le grand code de Meera pour résoudre certains des problèmes que je faisais face à: Je voulais des liens à tête de propriété plutôt que des cases inférieures. J'ai ajouté un crochet d'usage d'usage et fait peu d'autres modifications.
import React from 'react'
import { useLocation, Link as RouterLink } from 'react-router-dom'
import { Breadcrumbs, Typography, Link } from '@material-ui/core'
function toTitleCase(str) {
return str.replace(/\b\w+/g, function (s) {
return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase()
})
}
export default function () {
let location = useLocation()
const pathnames = location.pathname.split('/').filter((x) => x)
return (
<Breadcrumbs aria-label='Breadcrumb'>
<Link color='inherit' component={RouterLink} to='/'>
Home
</Link>
{pathnames.map((value, index) => {
const last = index === pathnames.length - 1
const to = `/${pathnames.slice(0, index + 1).join('/')}`
return last ? (
<Typography color='textPrimary' key={to}>
{toTitleCase(value)}
</Typography>
) : (
<Link color='inherit' component={RouterLink} to='/' key={to}>
{toTitleCase(value)}
</Link>
)
})}
</Breadcrumbs>
)
}