我使用的是最新版本的create-react-app。我已经搜索了所有教程并尝试了一些具有不同教程的网站,但我没有收到错误。
我正在尝试返回应用程序中的页面。我已经完成了功能组件和基于类的组件,但没有看。我尝试过包装作为回报,但它不会呈现。所有应用程序都有效,但页面内容不显示:(
关于.js和家.js是这样的:
import React from 'react';
const About = () => (
<div>
<h2>About</h2>
</div>
);
export default About;
导航.js非常简单:
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import './css/Nav.css';
const Nav = () => (
<ul>
<li>
<NavLink
activeClassName="active"
to="/">Home</NavLink>
</li>
<li>
<NavLink
activeClassName="active"
to="/about">Admin</NavLink>
</li>
</ul>
);
export default Nav;
最后是指数.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
Switch
} from "react-router-dom";
import registerServiceWorker from './misc';
// COMPONENTS
import Nav from './nav/Nav';
// PAGE COMPONENTS
import Home from './pages/Home';
import About from './pages/About';
import Page404 from './pages/404';
// CSS
import './css/Index.css';
// CONSTRUCT
class SmartApartmentApp extends Component {
render() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Route exact path="/" Component={Home} />
<Route path="/about" Component={About} />
<Route component={Page404} />
</Switch>
<Footer />
</div>
</Router>
);
}
}
// EXECUTE
export default SmartApartmentApp;
ReactDOM.render(<SmartApartmentApp />, document.getElementById('root'));
registerServiceWorker()
;
这个问题是使用错误的道具名称Component
!
要在路由组件中解决此问题component
使用小写c
传递 prop,而不是使用大写C
Component
。
例:
<Route path="/about" component={About} />
使用组件属性而不是组件。