A continuación se muestra la implementación actual de mi enrutador, que está codificada y es redundante. Tengo un objeto que contiene toda la ruta, por ejemplo, como a continuación
ruta = ["salud-fisica","salud-general","bienestar"];
Quiero hacerlo dinámico para reducir la codificación dura y hacerlo más escalable. Algo como esto.
for (var i = 0; i < path.length-1; i++) { <Route exact path={this.state.basePath + path[i]} render={() => <Welcome />} /> }Pero no parece estar funcionando dentro de BrowserRouter.
render() { return( <BrowserRouter history={history}> <div className=""> <div id="maincontent"> <Route exact path={this.state.basePath +"/physical-health"} render={() => <Welcome />} /> <Route exact path={this.state.basePath +"/general-health"} render={() => <Welcome />} /> <Route exact path={this.state.basePath +"/wellbeing"} render={() => <Welcome />} /> </div> </div> </BrowserRouter> ); }Puedes usar .map() para hacer lo que estás buscando:
path = ["/physical-health","/general-health","/wellbeing"]; path.map(p => <Route exact path={this.state.basePath + p} render={() => <Welcome />} />)De otra manera:
path = ["physical-health","general-health","wellbeing"]; path.map(p => <Route exact path={`${this.state.basePath}/${p}`} render={() => <Welcome />} />)Para un ejemplo completo:
render() { const path = ["physical-health","general-health","wellbeing"]; return( <BrowserRouter history={history}> <div className=""> <div id="maincontent"> {path.map(p => <Route exact path={`${this.state.basePath}/${p}`} render={() => <Welcome />} />)} </div> </div> </BrowserRouter> ); }