Реагировать на контекст внутри маршрута

Question

Я пытаюсь получить контекстные переменные внутри маршрута React.Это мой код

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/home/:loc" render={(props)=> {
      <AppContext.Consumer>
        {
          context=><Home context={context} />
        }
      </AppContext.Consumer>

    }} />
</Switch>

Это мой AppContext.js

import React from 'react';

export const AppContext = React.createContext();

Это то, как я устанавливаю контекст

 <AppContext.Provider value={this.state}>
        <div className="App">
          <Header />
          <Content />
          <Footer />
        </div>
      </AppContext.Provider>

Это ошибка, которую яя получаю

Ожидается присваивание или вызов функции, и вместо этого он видит выражение no-unused-выражения

Есть идеи, что здесь не так?

Answer 1

Ожидал присваивания или вызова функции и вместо этого увидел выражение no-unused-expressionions

- это не ошибка, а предупреждение линтера.Правило no-unused-expressions часто указывает, что код может работать не так, как задумано, из-за ошибки разработчика.

Проблема с опубликованным кодом заключается в том, что функция render arrow не возвращает ничего.

Itдолжно быть:

<Route path="/home/:loc" render={(props)=> (
  <AppContext.Consumer>
    {
      context=><Home context={context} />
    }
  </AppContext.Consumer>

)} />

=> {...} требует явного возврата, в то время как => (...) является неявным возвращением.