3

嗨，我是 react 新手，我想用 来实现routing，Loadable但它不起作用它在http://localhost:3000/user或http://localhost:3000/时显示空白页

你能纠正我哪里做错了吗。我也越来越——

警告：道具类型失败：提供给component的道具类型无效，应为。stringRoutefunction

我的代码是：

主页.js

import React, { Component } from 'react';
import { Link} from 'react-router-dom';


class Home extends Component {
    render() {
        return (
                <div>
                  <h1>Welcome to the Tornadoes Website!</h1>
                  <h5><Link to="/user">User</Link></h5>
                </div>
              );
    }
} 

export default Home;

用户.js：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class User extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>6/5 @ Evergreens</li>
                    <li>6/8 vs Kickers</li>
                    <li>6/14 @ United</li>
                    <li><Link to="/">Home</Link></li>
                </ul>
            </div>
        )
    }
}
export default User;

应用程序.js：

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { history } from './helpers/history';
import Loadable from 'react-loadable';
import './App.css';

const Loading = () => <div> Loading... </div>;

const Home = Loadable({
  loader: () => import('./components/home-component/home'),
  loading: Loading
});

const User = Loadable({
  loader: () => import('./components/user-component/user'),
  loading: Loading
});

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route exact path="/" component="Home" />
          <Route path="/user" component="User" />
        </Switch>
      </Router>
    );
  }
}

export default App;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

registerServiceWorker();
4

2 回答 2

2

我看到你正在这样做：<Route exact path="/" component="Home" />这应该是<Route exact path="/" component={Home} />因为你想使用那个变量，当他不知道你想要哪个组件时，字符串是不可能引用的。我希望这有帮助

于 2018-06-18T08:50:44.273 回答
0

这在我看来就像isRequired调用组件时错过了一个 propType。您也可以在这里发布您的组件吗？

于 2018-06-18T09:40:37.077 回答