react-router-native <Redirect> 呈现空白页面

Question

虽然我已经尝试了六种排列以查看是否有任何变化，但逻辑似乎很简单。我不知道为什么 react-router 会这样：

import React from 'react'
import { View, Text } from 'react-native'
import { observer, inject } from 'mobx-react'
import { NativeRouter, Link, Route, Redirect, Switch } from 'react-router-native'

import Welcome from './welcome'
import Tutorial from './tutorial'
import Plants from './plants'

@inject('store')
@observer
class Main extends React.Component {
  render() {
    const newUser = true //this.props.store.plants.length === 0
    const home = newUser ? '/welcome' : '/plants'
    return (
      <Switch>
        <Route path='/plants' component={Plants} />
        <Route path='/tutorial' component={Tutorial} />
        <Route path='/welcome' component={Welcome} />
        <Redirect to={home} />
        <Route path='/' component={Welcome} />
      </Switch>
    )
  }
}

export default Main

最后的 'welcome' 应该是不必要的，但我把它放在那里进行测试：如果我删除然后欢迎确实出现，所以很明显这是导致呈现空白页面的原因。

这是顶层组件的render()方法：

return (
  <Provider store={store}>
    <NativeRouter>
      <Main />
    </NativeRouter>
  </Provider>
)

这基于 https://reacttraining.com/react-router/native/guides/philosophy 中的示例，该示例显示了所有在没有封闭路由器的情况下使用的交换机、路由和重定向：

const App = () => (
  <AppLayout>
    <Route path="/invoices" component={Invoices}/>
  </AppLayout>
)

const Invoices = () => (
  <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
          </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
          </Switch>
      }
    </Media>
  </Layout>
)

Answer 1

将 NativeRouter 用作 Main 组件中的最顶层组件，它将按预期工作。

@inject('store')
@observer
class Main extends React.Component {
  render() {
    const newUser = true //this.props.store.plants.length === 0
    const home = newUser ? '/welcome' : '/plants'
    return (
      <NativeRouter>
        <Switch>
          <Route path='/plants' component={Plants} />
          <Route path='/tutorial' component={Tutorial} />
          <Route path='/welcome' component={Welcome} />
          <Redirect to={home} />
        </Switch>
      </NativeRouter>
    )
  }
}

react-router-native <Redirect> 呈现空白页面

react-router-native <Redirect> renders blank page

reactjs

react-router

react-native

mobx

react-router-native