React Router v3 - IndexRoute не работает в кэше Google

Question

В React Router v3, IndexRoute не работает в Google Cache (кеш: www.mywebsite.com). Он показывает компоненты Layout и NotFound (вместо компонентов Layout и Home). Пожалуйста, найдите ниже мой пример конфигурации маршрутизатора.

<Route path='/' component={Layout}>
    <IndexRoute component={Home} />
    <Route path='/users'>
        <Route path=':category/:id' component={User} />
    </Route>
    <Route path='*' exact={true} component={NotFound} />
</Route>

Answer 1

Пожалуйста, попробуйте это решение. В этом случае работает индексный маршрут.

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './components/App';
import Greetings from './components/Greetings';
import SignupPage from './components/signup/SignupPage';
import LoginPage from './components/login/LoginPage';
import NewEventPage from './components/events/NewEventPage';

import requireAuth from './utils/requireAuth';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Greetings} />
    <Route path="signup" component={SignupPage} />
    <Route path="login" component={LoginPage} />
    <Route path="new-event" component={requireAuth(NewEventPage)} />
  </Route>
)

Вы можете использовать эти экспортированные маршруты в файле индекса следующим образом.

<Router history={browserHistory} routes={routes} />

Answer 2

Вы можете удалить path из Route, который отображает ваш Layout, и создать отдельное Route для path из / как дочернего для этого.

Пример

<Route component={Layout}>
  <Route path="/" component={Home} />
  <Route path="/users" component={Users}>
    <Route path="user/:id" component={User} />
  </Route>
  <Route path="/settings" component={Settings} />
  <Route path="*" component={NotFound} />
</Route>

Answer 3

Я думаю, что это не работает, потому что он пытается выразить // как путь для перехода.

должно быть примерно так:

<Route path="/" component={App}>
    <Route component={Layout}>
        <IndexRoute component={Home} />
        ...
    </Route>
    <Route component={Settings}>
        <Route path="*" component={NotFound} />
        <Route path="settings" component={Settings} />
        ...
    </Route>
</Route>

Answer 4

Просто удалите '/' из первой строки, а также убедитесь, что вы используете browserHistory:

  <Router history={browserHistory}>
  <Route path='/' component={Layout} >
  .
  .
  .
  </Route>
  </Router>