React 功能组件未在 App.js 中呈现答案

【问题标题】：React functional components not rendering in App.jsReact 功能组件未在 App.js 中呈现
【发布时间】：2021-07-29 01:03:57
【问题描述】：

我在 React 中只使用函数式组件，以便更好地掌握钩子。但我无法在 App.js 中渲染我的功能组件。

为什么只有“登录”组件/路径会在浏览器中呈现？其他都没有。请帮助我发现我的 App.js 有什么问题。谢谢！

App.js （我已经注释掉了钩子/删除了道具，以简化它）

import { React, useState } from 'react';
import './App.css';
import { Route } from 'react-router-dom';
import Home from './components/Home'
import Login from './components/Login'
import Signup from './components/Signup';
console.log('app loading')
function App() {
  // const [user, setUser] = useState(props.user)
  // console.log(props.user)
  return (
    <div className="App">
    {/* <h1>This is app.js</h1> */}
    <Route
        exact path = "/"
        compotent={Home}
      /> 
    <Route
        exact path="/login" 
        component={Login}
    />
    <Route
        exact path = "/signup"
        compotent={Signup}
      /> 
    </div>
    
  );
}
export default App;

Home.js

import React from 'react'
console.log('home loading')
export default function Home() {
  console.log('home function')
  return (
    <div>
    <h1>This is home.js</h1>
    </div>
  )
}

Login.js （这是唯一呈现的）

import React from 'react'
import { Link } from 'react-router-dom'
console.log('login loading')
export default function Login() {
  console.log('login function loading')
  return (
    <div>
    <h1>Login.js</h1>
    <Link to="/auth/google">Login With Google</Link>
    </div>
  )
}

Signup.js

import React from 'react'
export default function Signup() {
  console.log('signup function loading')
  return (
    <div>
    <h1>This is Signup.js</h1>
    </div>
  )
}

【问题讨论】：

标签： javascript reactjs rendering react-functional-component

【解决方案1】：

尝试删除 Home 和 Signup 路由的空格 exact path = "/" => exact path="/"

【讨论】：

【解决方案2】：

试试这个：

import { React, useState } from 'react';
import './App.css';
import { Route, BrowserRouter as Router } from 'react-router-dom'
import Home from './components/Home'
import Login from './components/Login'
import Signup from './components/Signup';
console.log('app loading')
function App() {
  // const [user, setUser] = useState(props.user)
  // console.log(props.user)
  return (
    <div className="App">
    {/* <h1>This is app.js</h1> */}
    <Router>
      <Route
        exact path = "/"
        compotent={Home}
      /> 
      <Route
          exact path="/login" 
          component={Login}
      />
      <Route
          exact path = "/signup"
          compotent={Signup}
        /> 
    </Router>
    
    </div>
    
  );
}
export default App;

这应该可以工作

【讨论】：

【解决方案3】：

请通过以下更改重新构建您的 app.jsx：

import { React, useState } from 'react';
import './App.css';
import { Route, BrowserRouter as Router } from 'react-router-dom'; //I MADE CHANGE HERE
import Home from './components/Home'
import Login from './components/Login'
import Signup from './components/Signup';

function App() {
  console.log('app loading')
  return (
    <div className="App">
  <Router>     //I MADE CHANGE HERE
    <Route
        exact path = "/"
        compotent={Home}
      /> 
    <Route
        exact path="/login" 
        component={Login}
    />
    <Route
        exact path = "/signup"
        compotent={Signup}
      /> 
 </Router> //I MADE CHANGE HERE
    </div>
    
  );
}
export default App;

【讨论】：

【解决方案4】：

感谢您的帮助@Chintan Sulani @Игорь Сыров @Khojiakbarkhon Isakov @Aadit M Shah。

一位同事指出问题出在 '/' 和 '/signup' 路由中的拼写错误。

我写的是 'compotent=...' 而不是 'component'。

代码现已更正，组件n正在渲染，只需找到即可。

【讨论】：