分享
三行代码  ›  专栏  ›  技术社区  ›  Pakira

动态路径映射

  •  1
  • Pakira  · 技术社区  · 1 周前

    例如,我的应用程序有诸如item1、item2等导航项。来自内容管理系统的项目不固定。

    导航url也可以是本地主机:3000/content/item2.html或者本地主机:3000/content/item1/item2.html等等。 我在网上查了一下,但找不到如何实现这一要求。有什么例子或在线页面吗?

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

    在路由.js我要调用与此url模式匹配的MyComponent,如下所示:本地主机:3000/content/item2.html或者本地主机: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,
    },
    
     ];
    
    1 回复  |  直到 1 周前
        1
  •  0
  •   Shubham Khatri    1 周前

    您只需删除确切的属性并将路径设置为 /content

    export default [
        {
            path: "/",
            component: Home,
            exact: true,
        },
        {
            path: "/content",
            component: MyComponent,
        },
    
    ];