时间戳

首页 > 解决方案 > React Router Dom 组件在 App.js 中呈现，但不是作为单独的组件

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

问题描述

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

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

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

标签： javascriptreactjsurl-routingreact-router-dom

解决方案

Change from to path in Redirect.

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

推荐阅读