reactjs react-router

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>