reactjs - Cómo cambiar la ruta de repetición inútil
react-router (3)
Si necesita manejar cuatro rutas específicas (A | B | C | D);
<Route path="/(A|B|C|D)/xx/xxx/:feeros" component={About} />
Si aún necesita interceptar el parámetro, pero los valores solo pueden ser A | B | C | D, entonces puedes escribir esto:
<Route path="/:letter(A|B|C|D)/xx/xxx/:feeros" component={About} />
Tendrás dos parámetros:
const { letter, feeros } = match.params;
la letra solo puede ser: "A", "B", "C" o "D"
Puedes usar otra expresión regular.
por ejemplo así:
<Route path="/([a-zA-Z])/xx/xxx/:feeros" component={About} />
La ruta funcionará para una letra latina, por ejemplo:
''/A/xx/xxx/value''
''/s/xx/xxx/value''
''/F/xx/xxx/value''
Además, puede usar expresiones regulares para parámetros:
<Route path="/([a-zA-Z])/xx/xxx/:feeros(/d{2})" component={About} />
Coincide con rutas con valores de feeros de dos dígitos:
''/A/xx/xxx/11''
''/s/xx/xxx/21''
''/F/xx/xxx/45''
Estoy trabajando con react-router por primera vez.
Aquí está mi pieza de código.
<Switch>
<Route exact path="/" component={Home} />
<Route path="/A/xx/xxx/:feeros" component={About} />
<Route path="/B/xx/xxx/:feeros" component={About} />
<Route path="/C/xx/xxx/:feeros" component={About} />
<Route path="/D/xx/xxx/:feeros" component={About} />
</Switch>
Esta parte del código
<Route path="//xx/xxx/:feeros" component={About} />
siempre se repite. ¿No hay forma de reducir este enrutador de reacción?
Usar parámetros de ruta .
<Switch>
<Route exact path="/" component={Home} />
<Route path="/:letter/xx/xxx/:feeros" component={About} />
</Switch>
En el lado del componente, puede tomar el valor del parámetro:
componentDidMount() {
const { match: { params } } = this.props;
console.log(params.letter);
console.log(params.feeros);
}
podría tener un parámetro para identificar:
A
,
B
, etc.
<Switch>
<Route exact path="/" component={Home} />
<Route path="/:id/xx/xxx/xx" component={About} />
</Switch>