react JS url params name 在可选时保留在 url

Question

我是 ReactJS 的初学者，我在使用 url 中的可选参数时遇到了麻烦。

我用的是react-router-dom 5.1.2.

当我尝试使用具有可选参数的组件创建路由时，如果没有参数值，则此路由将保留参数名称。如果我创建一个带参数的 Link 一切正常。

例如在我的sideBar中访问AudioComponent的路径是（link是用路由组件生成的）：

<a class="sidebar-link" href="/callcenter/soundplayer/:agentName?/:date?">Audios</a>

我的组件路由：

{
  path: "/callcenter/soundplayer/:agentName?/:date?",
  name: "Audios",
  component: SoundFileRow,
  isShow: true,
  access: "staffAccess"
},

还有我的Routes.js（我下载了一个模板所以路由代码已经是那样了，除了条件）

const childRoutes = (Layout, routes, navBarAccess) =>   routes.map(({ children, path, realPath, component: Component, access }, index) =>
    children ? (
      // Route item with children
      children.map(({ path, component: Component , access}, index) => (
        <Route
          key={index}
          path={path}
          exact
          render={props => (
            (checkIsAuth())? 
            checkHasAccess(access) ? 
            <Layout>
              <Component {...props} />
            </Layout> :
            <AuthLayout>
              <Page404 />
            </AuthLayout> :
            <Redirect to={{ pathname: '/auth/sign-in' }} />
          )}
        />
      ))
    ) : (
      // Route item without children
      <Route
        key={index}
        path={path}
        exact
        render={props => (
          (checkIsAuth()) ? 
          (checkHasAccess(access)) ? 
            <Layout>
              <Component {...props} />
            </Layout> : 
            <AuthLayout>
              <Page404 />
            </AuthLayout> :
            (path !== "/auth/sign-in") ? 
            <Redirect to={{ pathname: '/auth/sign-in' }} /> : 
            <Layout>
              <Component {...props}  />
            </Layout>
        )}
      />
    )   );

和我的渲染：

render() {
       return (   <Router>
     <ScrollToTop>
       <Switch>
         {childRoutes(DashboardLayout, dashboardRoutes)}
         {childRoutes(DashboardLayout, defaultRoutes)}
         {childRoutes(AuthLayout, signInRoutes)}
         <Route
           render={() => (
             (checkIsAuth()) ? 
             <AuthLayout>
               <Page404 />
             </AuthLayout> : 
             <Redirect to={{ pathname: '/auth/sign-in' }} />
           )}
         />
       </Switch>
     </ScrollToTop>   </Router> );   }

有人遇到过这个问题吗？在此先感谢您的帮助:)

Answer 1

我解决了。问题出在模板中，该模板使用相同的路径来了解 url 参数并在 href 中显示 url。我只是在我的组件中创建了一个新参数：

{
      path: "/callcenter/soundplayer",
      realPath: "/callcenter/soundplayer/:agentName?/:date?",
      name: "Audios",
      component: SoundFileRow,
      isShow: true,
      access: "staffAccess"
    },

然后我将它添加到我的 router.js :

    const childRoutes = (Layout, routes, navBarAccess) =>
routes.map(({ children, path, realPath, component: Component, access }, index) =>
  children ? (
      // Route item with children
      children.map(({ path, realPath, component: Component , access}, index) => (
        <Route
        key={index}
        path={realPath}
        exact
        render={props => (
          (checkIsAuth())? 
          checkHasAccess(access) ? 
          <Layout>
          <Component {...props} />
          </Layout> :
          <AuthLayout>
          <Page404 />
          </AuthLayout> :
          <Redirect to={{ pathname: '/auth/sign-in' }} />
          )}
        />
        ))
      ) : (
      // Route item without children
      <Route
      key={index}
      path={realPath}
      exact
      render={props => (
        (checkIsAuth()) ? 
        (checkHasAccess(access)) ? 
        <Layout>
        <Component {...props} />
        </Layout> : 
        <AuthLayout>
        <Page404 />
        </AuthLayout> :
        (path !== "/auth/sign-in") ? 
        <Redirect to={{ pathname: '/auth/sign-in' }} /> : 
        <Layout>
        <Component {...props}  />
        </Layout>
        )}
        />
        )
      );

希望今天对某人有用！

react JS url params name 在可选时保留在 url

reactJS url params name stay in url when are optionnal

router

reactjs

react-router-dom