动态路径映射

Question

例如，我的应用程序具有导航项，例如item1，item2等。来自内容管理系统的项目不固定。我想在单击每个项目时调用一些第三方API并显示在组件中。因此，如果item1的url为localhost：3000 / content / item1.html，那么如果我单击此URL，那么我想通过传递url值在我相应的单个组件中调用API：mycontent / item1.json

导航网址也可以是localhost：3000 / content / item2.html或localhost：3000 / content / item1 / item2.html，依此类推。在所有情况下，我都希望路由到单个组件。我该怎么做？我在网上进行了调查，但找不到如何实施此要求。有示例或在线页面吗？

在我的express server.js中，我正在这样做：

   <ReduxProvider store={ store }>
            <StaticRouter context={ context } location={ req.url }>
                <Layout />
            </StaticRouter>
    </ReduxProvider>

现在在布局组件中：

    render() {
    return (
        <div>
            <h1>{ this.state.title }</h1>
             <Navigation />
            <Switch>
                { routes.map( route => <Route key={ route.path }  { ...route } /> ) }
            </Switch>
        </div>
    );
  }

在routs.js中，我想调用与该URL模式匹配的MyComponent，如下所示：localhost：3000 / content / item2.html或localhost：3000 / content / item1 / item2.html，依此类推，等等）>

export default [
{
    path: "/",
    component: Home,
    exact: true,
},
{
    path: "/content/*",  // Here I want to match pattern of the url starts with /content and call MyComponent with actual URL path
    component: MyComponent,
    exact: true,
},

 ];
    

例如，我的应用程序具有导航项，例如item1，item2等。来自内容管理系统的项目不固定。我想点击...

Answer 1

您需要做的就是删除确切的属性，仅将路径设为/content，就可以了