使用Router4报错Invalid prop `component` of type `object`

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import HomePage from './pages/Home';
import UserAddPage from './pages/UserAdd';

/*---------------
/      全屏缩放   /
---------------*/


// 公共样式部分

ReactDOM.render(
    <Router>
        <Switch>
            {/* 首页轮播大屏 */}
            <Route path="/" component={HomePage}/>
            <Route path="/user/add" component={UserAddPage}/>
        </Switch>

    </Router>,
    document.getElementById('app')
);
import React from 'react';
import { Link } from 'react-router-dom';

class Home extends React.Component {
    render () {
        return (
            <div>
                <header>
                    <h1>Welcome</h1>
                </header>

                <div>
                    <Link to="/user/add">添加用户</Link>
                </div>
            </div>
        );
    }
}

export default Home;
import React from 'react';

class UserAdd extends React.Component {
    render () {
        return (
            <div>
                <header>
                    <h1>添加用户</h1>
                </header>

                <main>
                    <form>
                        <label>用户名:</label>
                        <input type="text"/>
                        <br/>
                        <label>年龄:</label>
                        <input type="number"/>
                        <br/>
                        <label>性别:</label>
                        <select>
                            <option value="">请选择</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                        <br/>
                        <br/>
                        <input type="submit" value="提交"/>
                    </form>
                </main>
            </div>
        );
    }
}

图片描述

阅读 3k
1 个回答

UserAdd 没有export

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题