我使用“npx create-react-app name”设置了一个新的反应项目。我尝试清理所有不需要的文件，当然除了那些必要的文件，但现在什么也没有显示。当反应路由器和路由不起作用时，我也遇到了麻烦。
index.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>
index.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 文件。如果有人知道我做错了什么，请评论。
安装react-router-dom旧版本，即5.2.0，
或者你可以运行 npm i [电子邮件受保护] 并重新启动您的服务器，这意味着 npm start 及其工作正常，您的 home 组件应该像这样。
const Home = () => {
return(
<form>
<input type="email" placeholder='your email here'/>
<input placeholder='displayname'/>
<input type="password" placeholder='your password here'/>
</form>
)
}
如果您使用最新版本（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;
我的指针所指的左上角，它显示了与本地主机到我新创建的组件的连接，很高兴我很快找到了它
我的指针所指向的左上角，它显示了与本地主机到我新创建的组件的连接！很高兴我很快找到了它。执行此操作后，我的 React 应用程序在 Chrome 中可见，希望这有帮助:)
