c00ldev

Ваш ответ на вопрос в документации

Немного растолкую.

1. Создаём роут по урлу "/goods", где будет рендериться компонента Goods (вы уже создали)
2. В компоненте Goods организовываем новый роутинг.

domain.com и domain.com/ — два идентичных адреса. Если после домена ничего нет, то слэш можно опустить. Если есть query-параметр, то слэш необходим. Без него никак.

{this.state.ad.map(n => (
  <div key={n.id}>
    <h2>{n.title}</h2>
    <div>{n.images.map(src => <img src={src} />)}</div>
  </div>
))}

ошибка в объявлении getMovies(text)

getMovies = text => async () => { }
// другими словами ты возвращаешь async функцию
function getMovies(text) {
  return async function() { }
}

// а надо так
getMovies = async text =>  {
  try {
    const URL = `https://api.tvmaze.com/search/shows?q=${text}`;
.....

и тут немного поменять

renderPosts() {
    if (this.state.error) {
      return this.renderError();
    }

    return (
      <ul>
        {this.state.posts.map(post => (
          <li key={post.show.id}>{post.show.name}</li>
        ))}
      </ul>
    );
  }

Не вижу тут никаких пробрасываний пропов в компонент Details

<Route path="/goods/:id" render={() => <Details goods={goods} />} />

Замените на

<Route path="/goods/:id" render={(props) => <Details {...props} goods={goods} />} />