在带有 BrowserRouter 的 React JS 中使用字符串列表作为路径创建动态路由

Question

下面是我的路由器的当前实现，它有点硬编码和冗余。 我有一个包含所有路径的对象，例如如下

path = ["physical-health","general-health","wellbeing"];

我想让它动态化以减少硬编码并使其更具可扩展性。 像这样。

for (var i = 0; i < path.length-1; i++) {
        <Route exact path={this.state.basePath + path[i]} render={() => <Welcome />} />
    } 

但它似乎在 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>
        );
    }

Answer 1

你可以使用 .map() 来做你正在寻找的东西：

path = ["/physical-health","/general-health","/wellbeing"];
path.map(p => <Route exact path={this.state.basePath + p} render={() => <Welcome />} />)

另一种方式：

path = ["physical-health","general-health","wellbeing"];
path.map(p => <Route exact path={`${this.state.basePath}/${p}`} render={() => <Welcome />} />)

完整示例：

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