react routing - 渲染错误（单页应用）

Question

您好，我正在学习 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"
  }

Answer 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>            
    );
}

您也可以删除构造函数，因为您在此示例中不使用它。

Answer 2

修复你的构造函数：

constructor(props) {
    super(props);
}

react routing - 渲染错误（单页应用）

react routing - rendering error (single page application)

reactjs

react-router

react-router-dom