我用“npx create-react-app name”建立了一個新的反應專案。我試圖清理所有我不需要的檔案，當然除了那些必要的檔案，但現在沒有任何顯示。當它也不起作用時，我在 react-router 和路由方面遇到了麻煩。
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>KassaSysteem</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
索引.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
應用程式.js
import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Login from './pages/Login';
function App() {
return (
<Router>
<div className='App'>
<Routes>
<Route path="/" exact component={Home}/>
<Route path="/login" component={Login}/>
</Routes>
</div>
</Router>
);
}
const Home = () => {
<form>
<input type="email" placeholder='your email here'/>
<input placeholder='displayname'/>
<input type="password" placeholder='your password here'/>
</form>
}
export default App;
登錄.js
import React from 'react'
function Login() {
return (
<div>
<h1>login</h1>
</div>
)
}
export default Login
這些是我擁有的所有檔案，除了 CSS 檔案。如果有人知道我做錯了什么，請發表評論。
uj5u.com熱心網友回復：
如果您使用最新版本 (v6)，則使用此代碼
import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Login from './pages/Login';
function App() {
return (
<Router>
<div className='App'>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />}/>
</Routes>
</div>
</Router>
);
}
function Home () {
return (
<form>
<input type="email" placeholder='your email here'/>
<input placeholder='displayname'/>
<input type="password" placeholder='your password here'/>
</form>
)
}
export default App;
uj5u.com熱心網友回復：
安裝 react-router-dom 舊版本 5.2.0，
或者您可以運行 npm i [email protected] 并重新啟動您的服務器，這意味著 npm start 及其作業正常，您的家庭組件應該是這樣的。
const Home = () => {
return(
<form>
<input type="email" placeholder='your email here'/>
<input placeholder='displayname'/>
<input type="password" placeholder='your password here'/>
</form>
)
}
uj5u.com熱心網友回復：
在你錯過回傳的家庭組件上，我試圖只提供它作業的組件..路由仍然不起作用..
const Home = () => {
return(
<form>
<input type="email" placeholder='your email here'/>
<input placeholder='displayname'/>
<input type="password" placeholder='your password here'/>
</form>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391785.html
標籤：javascript 反应 网络
上一篇：Ngfor不會在重新加載頁面上實作（Angular RXJS）
下一篇：如何洗掉物件和所有參考？