[英]Why can't rendering HTML page in React application?
I have 3 components in my React application that I use for Nav Bar.我的 React 应用程序中有 3 个组件用于导航栏。 In each component, there is a div element with id = 'root'
在每个组件中,都有一个 id = 'root' 的 div 元素
Index.html索引.html
<div id="root"></div>
This is how it looks my App.js -这就是我的 App.js 的外观 -
App.js应用程序.js
import logo from './logo.svg';
import './App.css';
import {Home} from './Home';
import {Department} from './Department';
import {Employee} from './Employee';
import {Navigation} from './Navigation';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="container">
<h3 className="m-3 d-flex justify-content-center">
React JS Tutorial
</h3>
<Navigation/>
<Routes>
<Route path='/' component={Home} exact/>
<Route path='/department' component={Department}/>
<Route path='/employee' component={Employee}/>
</Routes>
</div>
</BrowserRouter>
);
}
Example of Department Component:部门组件示例:
Department.js部门.js
import React, {Component} from 'react';
export class Department extends Component{
render(){
return(
<div className="mt-5 d-flex justify-content-left">
This is Department page
</div>
)
}
}
This is my index.js这是我的 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Home } from './Home';
//ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
const root = ReactDOM.createRoot(
document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(React.createElement(App, null), document.getElementsByClassName('root'));
I tried to use ReactDOM instead but without any success, this is how it looks我尝试改用 ReactDOM 但没有任何成功,这就是它的外观
Update Solved更新已解决
The problem was that I route by component instead element问题是我按组件而不是元素路由
Wrong <Route path='/department' component={Department}/>
错误
<Route path='/department' component={Department}/>
Correct <Route path='/department' element={<Department/>}/>
正确
<Route path='/department' element={<Department/>}/>
Solved解决了
The problem was that I route by component instead element问题是我按组件而不是元素路由
Wrong <Route path='/department' component={Department}/>
错误
<Route path='/department' component={Department}/>
Correct <Route path='/department' element={<Department/>}/>
正确
<Route path='/department' element={<Department/>}/>
You are using getElementsByClassName
, but your div: <div id="root"></div>
does not have a property class="root"
您正在使用
getElementsByClassName
,但您的 div: <div id="root"></div>
没有属性class="root"
use getElementById("root")
instead.改用
getElementById("root")
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.