這是我的 app.js
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Profile from "./pages/profile/Profile";
import Register from "./pages/register/Register";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Router>
<Routes>
<Route path="/">
<Home />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/register">
<Register />
</Route>
<Route path="/profile">
<Profile />
</Route>
</Routes>
</Router>
);
}
export default App;
這是我的 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')
);
并且下面提到了 react、react dom 等的版本
{
"name": "ft-app-four",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
}
終端顯示您現在可以在瀏覽器中查看 ft-app-four。
本地：http://localhost:3000
在您的網路上：http: //192.168.42.136 :3000
請注意，開發版本未優化。要創建生產版本，請使用 npm run build。
webpack 編譯成功
但我無法在瀏覽器螢屏上查看任何內容
uj5u.com熱心網友回復：
路由的作業方式在 v5 和 v6 之間react-router發生了顯著變化。
v6 的正確語法是：
<Route path="/" element={<Home />} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481610.html
標籤：javascript 反应 npm 反应域
上一篇：發布“舊”版本的包？