React|未在网站上显示内容

Question

我正在创建一个react应用程序。当我运行npm start时，我添加到App.js文件中的元素不会出现在网站上，index.html元素会加载，但其余元素不会加载。

这是我的代码：(注意：我使用的是react-router-dom的早期版本，这就是为什么我使用Switch而不是Routes(

App.js

import './App.css';
import React from 'react';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path="/" exact />
</Switch>
</Router>
</>
);
}
export default App;

---

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('root'));

---

Navbar.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
const [click, setClick] = useState(false);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
return (
<>
<nav className="navBar">
<div className='navbar-container'>
<Link to="/" className="navbar-logo">
<img alt="collabrity" src="images/icon.png" width="25" height="25"></img>collabrity
</Link>
<div className='menu-icon' onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
</ul>
</div>
</nav>
</>
)
}
export default Navbar

---

package.json

{
"name": "NAME",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

到目前为止，我所做的只是创建一个导航栏菜单，但网站上不会出现任何内容(即使只是在应用程序功能中放入类似<h1>Test</h1>的内容(。

提前感谢您朝着正确的方向努力。

Answer 1

您实际上并没有为路由呈现任何内容。对于Route组件，您必须将组件传递给组件道具，或者将其作为子组件添加。

<Route path="/" exact component={SomeComponent} />
{/* OR */}
<Route path="/" exact>
<SomeComponent />
</Route>

Answer 2

@Nawak Khalifah通过将我链接到他们的代码沙箱，为我指明了正确的方向。

我修改了index.js文件，使其看起来更像：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);

同时也传递路线的组件。这似乎解决了问题。

非常感谢。