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

Question

我在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;

主页.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>
)
}

注册.js

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

Answer 1

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

Answer 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;

这应该工作

Answer 3

请使用以下更改重组您的应用程序.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;

Answer 4

我在'/'和'/signup'路由中出现拼写错误。

我写的是'compo*t*ent=...'而不是'compo**n**ent'。

现在，代码已更正，compo**n**ents正在渲染find。