react routing - 渲染错误(单页应用)
react routing - rendering error (single page application)
您好,我正在学习 React 并尝试创建 SPA,但未呈现内部页面。
只渲染,不渲染 &
等内部组件
找不到确切的问题
我尝试了多种路由路径组合,例如
<Route path="/about" component={About}/>
<Route path="about" component={About}/>
我的完整代码
import React, { Component } from 'react';
import {render} from 'react-dom';
// import { Router, Route, Link } from 'react-router';
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
import About from './About';
import Home from './Home';
import Repos from './Repos';
import AboutChild from './AboutChild';
class App extends Component {
constructor() {
super(...arguments);
}
render(){
return (
<div>
<menu>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</menu>
</div>
);
}
}
render((<Router>
<App>
<Route exact path="/" component={Home} />
<Route path="/about" component={About}/>
<Route path="/repos" component={Repos}/>
</App>
</Router>), document.getElementById('root'));
来自 package.json
的组件版本
"dependencies": {
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1"
}
在您的 App 组件中渲染您需要 return 子道具。试试这个
render(){
return (
<div>
<menu>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</menu>
{this.props.children}
</div>
);
}
您也可以删除构造函数,因为您在此示例中不使用它。
修复你的构造函数:
constructor(props) {
super(props);
}
您好,我正在学习 React 并尝试创建 SPA,但未呈现内部页面。
只渲染,不渲染 &
等内部组件找不到确切的问题
我尝试了多种路由路径组合,例如
<Route path="/about" component={About}/>
<Route path="about" component={About}/>
我的完整代码
import React, { Component } from 'react';
import {render} from 'react-dom';
// import { Router, Route, Link } from 'react-router';
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
import About from './About';
import Home from './Home';
import Repos from './Repos';
import AboutChild from './AboutChild';
class App extends Component {
constructor() {
super(...arguments);
}
render(){
return (
<div>
<menu>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</menu>
</div>
);
}
}
render((<Router>
<App>
<Route exact path="/" component={Home} />
<Route path="/about" component={About}/>
<Route path="/repos" component={Repos}/>
</App>
</Router>), document.getElementById('root'));
来自 package.json
的组件版本"dependencies": {
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1"
}
在您的 App 组件中渲染您需要 return 子道具。试试这个
render(){
return (
<div>
<menu>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</menu>
{this.props.children}
</div>
);
}
您也可以删除构造函数,因为您在此示例中不使用它。
修复你的构造函数:
constructor(props) {
super(props);
}