React Router dom и Google webcache content 404 ошибка

Question

Сценарий немного конкретный и хитрый.Есть клиентское приложение, созданное с помощью ReactJS и response-router-dom для маршрутизации.Маршрутизация довольно проста, как показано ниже.

<Switch>
  <Route path="/" component={Home} exact/>
  <Route path="/about" component={About} />
  <Route component={404} />
</Switch>

После того, как Google проиндексировал сайт и проверил веб-кеш приложения, была показана страница 404, независимо от того, к какому URL-адресу сайта обращались.

Как я понял из сценария, веб-кеш Google может добавить что-то к URL-адресу, и, поскольку мы ищем exact URL-адресов, произойдет ошибка.

Поэтому я изменил структуру маршрутизации

<Switch>
  <Route path="/about" component={About} />
  <Route path="/404" component={404} />
  <Route path="/" component={Home}/>
</Switch>

Теперь, что произойдет,

1. Домашняя страница теперь является компонентом по умолчанию
2. 404 страница не появится, если не будет перенаправлена ​​на 404

После вышеуказанного изменения веб-кеш Google переходит на домашнюю страницу по умолчанию для всех URL-адресов.

Есть ли способ решить эту проблему?

пример URL-адреса веб-кэша выглядит следующим образом http://webcache.googleusercontent.com/search?client=firefox-b-d&channel=trow&q=cache%3Adomain.com%2Fabout%2F

ОБНОВЛЕНИЕ

Пробовал также с опциями подстановочных знаков.

<Switch>
  <Route path="/about*" component={About} />
  <Route path="/404" component={404} />
  <Route path="/" component={Home}/>
</Switch>

Но все равно в веб-кэше Google страница about-us переходит на домашнюю страницу.

ОБНОВЛЕНО ПРИМЕРОМ допроиллюстрировать проблему, например,
НЕТ соответствия, 404

Пример Codesandbox для иллюстрации проблемы

Answer 1

Как я понял из вашего кода и вашего объяснения у вас есть 3 маршрута:

1) \ как корень вашего проекта

2) old-match, который вы хотите перенаправить на совпадение

3) will-match которые хотят показать WillMatch компонент

и неизвестный маршрут должен быть компонентом NoMatch рендера. для этой цели лучше реализовать этот подход в ваших example.js в codesandbox, которые вы сказали выше для ваших маршрутов для обработки перенаправления и компонента 404:

<Switch>
    <Route path="/" exact component={Home} />
    <Route exact={true} path='/old-match' render={() => { return <Redirect to="/will-match" />; }} />
    <Route path="/will-match" component={WillMatch} />
    <Route component={NoMatch} />
</Switch>