React js 組件渲染

Question

你好我現在開始反應，我有點困惑，我正在使用路由/私有路由，所以我創建了一個組件文件夾，我將在其中包含我的登錄組件和我的 login / index.js 文件夾，我導入這個組件，但我毫無疑問有什么更好的方法來做到這一點：

我的 app.js：

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

import Routes from './routes';

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

export default App;

我的路線js：

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;

我沒有錯誤，但它不會在屏幕上呈現任何內容

Answer 1

看起來您在這里有一個錯字： <ionChange} placeholder="Informe sua senha"/>並且您重新粘貼了代碼的底部。

假設這是一個錯誤並成功編譯，您只需要底部export default並確保您的路徑對該文件是正確的。

Answer 2

./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>
    );
}

Answer 3

由於<loginComp/>不是您在 LoginPage 中創建的組件，因此它不會呈現數據。 你可以簡單地改變

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

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

請記住 /components/LoginForm 這是您保存的文件名，而不是您創建的組件。

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