Question

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

导航网址也可以是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,
},

 ];

Answer 1

您需要做的就是删除确切的属性，并将路径设置为source_dir/dir1/ source_dir/dir1/somefile.jpg (created at 20200522 113301) source_dir/dir2/ source_dir/dir2/somefile.jpg (created at 20200520 100501) source_dir/dir3/ source_dir/dir3/somefile.jpg (created at 20200425 245540) to: target_dir/20200522_113301_somefile.jpg target_dir/20200520_100501_somefile.jpg target_dir/20200425_245540_somefile.jpg，就可以了

/content

动态路径映射

1 个答案: