Question

我正在使用ConnectedRouter组件和自定义路由，如下所示：

const PrivateRoute = ({ layout: Layout, component: Component, rest }) => (

  <Route
    {...rest}
    render={matchProps => (
      <AuthConsumer>
        {({ authenticated }) =>
          authenticated ? (
            <Layout pathname={matchProps.location.pathname}>
              <Component {...matchProps} />
            </Layout>
          ) : (
            <Redirect to={{ pathname: '/login', state: { from: matchProps.location } }} />
          )
        }
      </AuthConsumer>
    )}
  />
)

我这样使用：

<Switch>
    <PrivateRoute
      exact
      path={`${match.url}someroute/:id`}
      layout={Layout}
      component={SomePage}
    />
</Switch>

以及类似的组件：

import React from 'react'

const SomePage = ({ match }) => {
  console.log('MATCH ', match.params)
  return <div>TESTING</div>
}

export default SomePage

在这种情况下，match为空，并且认为它在'/'路线上（即使location道具在/someroute/123上说了它。

另一方面，这可行：

<Route
      exact
      path={`${match.url}someroute/:id`}
      component={SomePage}
    />

并且匹配已正确更新。

我很困惑为什么会这样。任何帮助将不胜感激！

Answer 1

啊，我知道了。 rest应该是...rest，<Route>组件无法正确传递道具！

使用自定义Route组件时React Router匹配属性为null

1 个答案: