Question

我正在尝试在我的项目中链接React，Redux和React-Redux-Router，但是我在使嵌套路由协同工作时遇到了一些困难。

我试图通过父LoginForm组件的嵌套路由访问RegistrationForm组件。但是，当我尝试嵌套路由时，我的浏览器不会在localhost:3000/login/register

呈现任何内容

这是我的应用结构：

Root.js组件

import { Redux, React, React-Redux-Router Dependencies etc.} from 'modules'
import LoginForm from './LoginForm'

export default class Root extends Component {
    render() {
        return (
        <Provider store={store}>
            <ConnectedRouter history={history}>
            <Switch>
                    <Redirect exact="true" from="/" to="/login"/>
                    <Route exact={true} path="/login" component={LoginForm} />
            </Switch>
            </ConnectedRouter>
        </Provider>
        )
    }
}

LoginForm.js组件

import RegisterForm from './RegisterForm'
import { connect } from 'react-redux'

class LoginForm extends Component {

 render() {
  const { match } = this.props;
    return (
        <form onSubmit={this.handleSubmit}>
             {Some Form Inputs}

            <div>
                Don't have an account? Register now!

                <Link to={match.url + "/register"}>  Register </Link>

                <Route path="/login/register" component={RegisterForm}>
                    // Nothing renders at this Route Path.
            </div> 
        </form>
    )
 }
}
export default withRouter(connect(mapStateToProps)(LoginForm))

当我尝试这种类型的嵌套路由时，我的浏览器不会在localhost:3000/login/register

显示任何内容

当我查看React DevTools时，项目结构包含一个空的Switch元素：

<Root>
  <Provider>
    <ConnectedRouter>
      <Router>
        <Switch></Switch> // EMPTY - - No Routes ??
      </Router>
    </ConnectedRouter>
  </Provider>
</Root>

但是，如果我停止尝试嵌套路由，只需将注册组件的路由放在Root.js组件中，则RegistrationForm会按预期呈现：

export default class Root extends Component {
       // This renders everything properly at /login/register
    render() {
        return (
        <Provider store={store}>
            <ConnectedRouter history={history}>
            <Switch>
                    <Redirect exact="true" from="/" to="/login"/>
                    <Route exact={true} path="/login" component={LoginForm} />
                    <Route path="/login/register" component={RegisterForm}/>
            </Switch>
            </ConnectedRouter>
        </Provider>
        )
    }
}

我为这个冗长的问题道歉，但我不确定为什么我的嵌套路由没有被呈现，为什么我必须将所有路由放在主App组件中以便路由工作。看起来Redux和React-Router已正确安装，控制台显示路由位置更改的正确记录。

我不认为正确提升了父LoginForm，以便可以呈现其嵌套的子Route，这就是Dev Tools中存在空<Switch></Switch>的原因。

如果熟悉React-Router v4的人可能会指出我的错误，我真的很感激！感谢您抽出宝贵时间阅读本文。

在react-redux-router

0 个答案: