Проходить реквизит по маршруту

Question

В ответ, как я могу настроить маршрут для передачи реквизита.например, мой route.tsx:

export const routes = () => (
  <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={ FetchData } />
  </Layout>
);

Как я могу передать некоторые данные в качестве реквизита в мой Counter компонент, когда вызывается / counter

Answer 1

Как отмечалось в других ответах, это обрабатывается с помощью render , который приводит пример:

<Route path="/home" render={() => <div>Home</div>}/>

Однако я (и многие другие) нахожу этот синтаксис довольно уродливым,В оригинальном выпуске о пропеллерной передаче с Route, есть популярная оболочка, которую я хотел всплыть, я сделал некоторые улучшения и предлагаю эту краткую и эффективную оболочку:

const PropsRoute = ({component, path, ...otherProps}) => (
  <Route {...otherProps} path={path} render={routeProps => 
      React.createElement(component, {...otherProps, ...routeProps})
    } />
)     

Это можно использовать, как и следовало ожидать:

<Router>
   <main>
     <PropsRoute exact path="/" component={Home} auth={this.state.auth} />
   </main>
</router>

Обратите внимание, что при этом пропустятся реквизиты маршрута до компонента. Любая реквизит, переданный в Route, который не является «компонентом» или «путем», будет передан компоненту.В этой формулировке любой routeProps (передаваемый реагирующим маршрутизатором) переопределяет пользовательские реквизиты, передаваемые с помощью этого синтаксиса.

Затем его можно довольно легко расширить, чтобы создать общий шаблон входа в систему:

const AuthedRoute = ({auth, ...props}) =>
  !auth.valid()? <Redirect to="/login" />: <PropsRoute {...{...props, auth: auth}} />;

Редактировать: я в значительной степени отказался от этого подхода с 2019 года в пользу чего-то вроде этого:

<Route {...{
    path: "/path/to/component",
    render: ({ location }) => <MyComponent {...{
        location
    }}/>
}}/>

Это может показаться немного грубее, но это делает глубоко вложенные рендеринг деревьев намного более четкими,и позволяет использовать полный Javascript в параметрах JSX.

Answer 2

Это сделает работу: Визуализация

    <Route
      path='/dashboard'
      render={(props) => <Dashboard {...props} isAuthed={true} />}
    />

Надеюсь, это поможет!

Answer 3

Чтобы упростить вещи, вы можете создать оболочку вокруг <Route>:

const RouteWrapper = ({ children, ...props }) => {
    const childrenWithProps = props => React.Children.map(children, child => React.cloneElement(child, { ...props }))}
    return <Route {...props} render={childrenWithProps} />
}

Использование:

<RouteWrapper
    exact
    path="/">
    <Component myProp={38} />
</RouteWrapper>

Answer 4

Вы можете использовать render prop.

  <Route 
     path='/counter' 
     render={(props) => (
       <Counter {...props} count={5} />
     )} 
  />