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

【问题标题】：React Router Dom components rendering in App.js, but not as separate componentReact Router Dom 组件在 App.js 中呈现，但不是作为单独的组件
【发布时间】：2021-05-23 21:27:52
【问题描述】：

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

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

        <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 没有向控制台输出任何内容。这意味着什么都没有渲染，也没有被调用。

有人能指出我为什么这不起作用吗？

编辑：我在调用 LoginSequence 的代码的 sn-p 中修复了 From 并将其更改为 Path，因为它没有效果，但 path 似乎是正常的做法。

【问题讨论】：

@SoufianeBoutahlil 它没有 :( 不确定在重定向上下文中 from 和 path 之间的区别是什么，但是在这两种情况下一切都还在重定向，只是在调用 LoginSequence 组件时，它实际上并没有呈现任何东西，但链接到它应该在的正确页面。

标签： javascript reactjs url-routing react-router-dom

【解决方案1】：

从重定向到路径。

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

【讨论】：

似乎没有任何效果。我将重定向到正确的页面（例如 /login-user），但是，如果通过 LoginSequence 调用，组件部分不会呈现。 'Login Sequence'（在 LoginSequence 组件内）的 console.log 消息也不会触发。

【解决方案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>

【讨论】：

我看到有一个登录用户组件，它包含什么？我的理解是它必须是定义和导入的东西。

【解决方案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>

【讨论】：