reactjs - Cómo cambiar la ruta de repetición inútil

react-router

Question

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?

Answer 1

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''

Answer 2

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);
}

Answer 3

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>