Javascript React js组件渲染

您好，我现在开始使用react，我有点困惑，我使用的是routes/private routes，因此我创建了一个components文件夹，在其中我将有我的登录组件和我的login/index.js文件夹，我将在其中导入此组件，但我毫不怀疑还有什么更好的方法：

我的app.js：

import React, { Component } from 'react';
import './App.css';

import Routes from './routes';

function App() {
  return (
          <Routes/>
  );
}

export default App;

我的路线：

export default function Routes(){
    return(
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component = {Login}/> //só chama rota se o caminho for exato; 
                <PrivateRoute path="/home" component = {DashBoard}/>              
            </Switch>
        </BrowserRouter>
    );
}

我的组件/登录信息：

import React, { Component } from 'react';

class LoginForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            login:'',
            password:'',
            errors: {},
            isLoading: false
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onSubmit.bind(this);
    }
    onSubmit(e){
        e.preventDefault();
    }
    onChange(e){
        this.state({[e.target.name]: e.target.value});
    }

  render() {
    const { errors, login, password, isLoading } = this.state;
    return (
        <form onSubmit={this.onSubmit}>
            <label for="login">Login</label>
            <input type="text" id="login" value={login} error= {errors.login} onChange={this.onChange} placeholder="Informe seu login" />
            <label for="password">Senha</label>
            <input type="password" id="password" value={password} error= {errors.password} onChange={this.onChange}   placeholder="Informe sua senha"/>
        <button className="btnEnt" type="submit" disabled ={isLoading}>Entrar</button>
    </form>
    )
  }
}

export default LoginForm;

现在我有点怀疑，因为我将在我的登录页面的index.js文件中调用我的登录comp

index.js

import React, { Component } from 'react';
import loginComp from '../../components/LoginForm';


class Login extends Component {
    render() {
      return (
          <loginComp />
      )
    }
  }

  export default Login;

---

我没有错误，但它不会在屏幕上呈现任何内容

看起来您在这里有一个输入错误： 您重新编写了代码的底部部分

假设这是一个错误并成功编译，您只需要使用底部导出默认值，并确保您对该文件的路径是正确的

/pages/login不存在，我相信您已将登录文件命名为LoginForm

而且，我非常肯定。BrowserRouter中需要一个div，如下所示：

export default function Routes(){
    return(
        <BrowserRouter>
          <div>
            <Switch>
                <Route path="/" exact component={Login}/> 
                <PrivateRoute path="/home" component={DashBoard}/>              
            </Switch>
          </div>
        </BrowserRouter>
    );
}

因为，不是您在LoginPage中创建的组件，所以它不会呈现数据。您只需更改

   import loginComp from '../../components/LoginForm';

to  import LoginForm from '../../components/LoginForm'; 

记住/components/LoginForm这是您保存的文件名，而不是您创建的组件

 render() {
      return (
          <LoginForm/>
      )
    }

---

这可能会解决您的问题。

您好，我并没有不正确地解释。无需担心，谢谢JoshHello我编辑的帖子丢失了，停止了错误，但没有在窗口中呈现任何内容更新了我的答案，你的路由器组件中可能有错误。我打开了，但我在my/pages/login/index.js中使用了一个console.log，他似乎没有呈现我的：从“../../components/LoginForm”导入loginComp；尝试将onSubmit={this.onSubmit}更改为onSubmit={=>this.onSubmit}，并将所有onChange={this.onChange}更改为onChange={=>this.onChange}，如果它是您在LoginForm中创建的组件，则在导入时执行以下操作：导入{loginComp}从.././Components/LoginForm这被称为destructuringimport LoginPage from../Components/pageName，使用它代替它将解决您的问题prblm@AyushiKeshiri你说我不明白是什么意思你能回答吗？让我投赞成票。