React Router Dom 组件在 App.js 中呈现，但不是作为单独的组件

Question

我正在尝试弄清楚 React Router Dom 是如何工作的，并且遇到了一个我什至不确定如何解决的问题。

如果在 App.js 中，我有这个片段，那么一切都会在各个部分之间呈现和导航，就可以了。

        <Switch>
            <Route path='/login-user' component={UserLoginForm} />
            <Route path='/login-database' component={LoginDatabaseSelect} />
            <Route path='/login-project' component={LoginProjectSelect} />
            <Redirect path='/' exact to='/login-user' />
        </Switch>

但是，这不是正确的方法，我正在尝试这样做：创建一个为此引用的不同组件。

        <Switch>
            <Route path='/login' component={LoginSequence} />
            <Redirect path='/' exact to='/login' />
        </Switch>

在 LoginSequence 中，代码是：

    import React from 'react';
    import { Route, Redirect, Switch } from 'react-router-dom';
    import UserLoginForm from "./LoginSequence/loginUserPass";
    import LoginDatabaseSelect from "./LoginSequence/loginDatabaseSelect";
    import LoginProjectSelect from "./LoginSequence/loginProjectSelect";
    
    
    class LoginSequence extends React.Component {
        render () {
            console.log('Login Sequence')
            return (
                <div>
                    <h1>Login Sequence</h1>
                        <Route path='/login-user' component={UserLoginForm} />
                        <Route path='/login-database' component={LoginDatabaseSelect} />
                        <Route path='/login-project' component={LoginProjectSelect} />
                        <Redirect path='/login' exact to='/login-database' />
                </div>
            )
        }
    }

export default LoginSequence;

然而，这个组件，甚至似乎都没有被称为 console.log 没有 output 任何控制台。 这意味着什么都没有渲染，也没有被调用。

有人可以指出我为什么这不起作用的正确方向吗？

编辑：我在调用 LoginSequence 的代码片段中修复了 From 并将其更改为 Path，因为它没有效果，但 path 似乎是正常的执行方式。

Answer 1

在重定向中从更改为路径。

 <Switch>
   <Route path='/login' component={LoginSequence} />
   <Redirect path='/' exact to='/login' />
 </Switch>

Answer 2

不要使用 Redirect 使用 Route 并调用要渲染的组件

 <Switch>
        <Route path='/login-user' component={UserLoginForm} />
        <Route path='/login-database' component={LoginDatabaseSelect} />
        <Route path='/login-project' component={LoginProjectSelect} />
        <Route path='/' exact component={login-user} />
    </Switch>

Answer 3

在与几个人交谈并看到更多示例之后，解决问题的事情变得更加清楚。

在 App.js 中：

        <Switch>
            <Route path='/login' component={LoginSequence} />
            <Redirect path='/' exact to='/login' />
        </Switch>

LoginScreen.js 中的 LoginSequence 组件：

class LoginSequence extends React.Component {
    render () {
        console.log('Login Sequence')
        return (
            <div>
                <h1>Login Sequence</h1>
                    <Route path='/login/user' component={UserLoginForm} />
                    <Route path='/login/database' component={LoginDatabaseSelect} />
                    <Route path='/login/project' component={LoginProjectSelect} />
                    <Redirect path='/login' exact to='/login/user' />
            </div>
        )
    }
}

我注意到的是，每次引用的“根”都会发生变化，因此，一旦我重定向到/login为loginsequence ，查找组件的新区域就在/login内。 因此/login/<user/database/project>必须是新路径，而不仅仅是/<user/database/project> ，因为它似乎在 App.js 中寻找它的引用并且找不到他们，因此不渲染。 似乎 RRD 遵循某种“树”结构，每次要嵌套它时，都必须遵循

/<path of component containing further routes>/<route of component referenced in component>