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

您可以删除呈现path的{{1}}的{{1}}并为Route的{{1}}创建一个单独的Layout还是那个孩子。

示例

Route

Answer 2

只需从第一行中删除“ /”，并确保您正在使用browserHistory：

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

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

请尝试此解决方案。在这种情况下，索引路由有效。

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} />

React Router v3-IndexRoute在Google缓存中不起作用

4 个答案: