react-dom - 使用 reactdom 在 React 中渲染组件时出现问题
问题描述
我一直想弄清楚这一点,但我做不到。ReactDom 将我带到路径,但不渲染我的组件/屏幕“ProductScreen.js”。控制台没有错误!!
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
应用程序.js
import { Container} from 'react-bootstrap';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<Router >
<Header />
<main className="py-3">
<Container>
<Route path='/product/id' component={ProductScreen}/>
<Route path='/' component={HomeScreen} exact/>
</Container>
</main>
<Footer />
</Router>
);
}
export default App;
ProductScreen.js
import React from 'react';
function ProductScreen() {
return (
<h1>Product</h1>
)
}
export default ProductScreen;
解决方案
推荐阅读
- c++ - 如何连接字符串和 DWORD?
- html - 按钮值属性不采用 css
- arrays - 提取并分配选定的结构行
- symfony - 顶部带有额外行的数据表 - SgDatatablesBundle
- joomla2.5 - 如何在 Joomla 中为每篇文章添加不同的 OG 和 twitter 元标签
- ruby-on-rails - Rails:切片中的数组元素除外
- python - 绘制我们的 PCA 的累积解释方差
- c# - 了解 Global.asax.cs 中的 Application_Start
- angular - Angular路由和Lay加载模块的问题
- python - 如果函数未定义,scipy root 返回猜测