Question

我遵循了这个tutorialpoint，当main.js中的所有代码都运行良好时。但是，如果我将我的代码放在分开的文件中，它就不起作用了：

app.jsx

import React from 'react';
import Link from 'react-router';

export default class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
                <li><Link to="/Home">Home</Link></li>
                <li><Link to="/About">About</Link></li>
                <li><Link to="/Contact">Contact</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

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

export class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

export class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router';
import App, { Home, About, Contact } from './app.jsx';

ReactDOM.render((

    <Router history = {browserHistory}>
        <Route path = "/" component = {App}>
            <IndexRoute component = {Home} />
            <Route path = "home" component = {Home} />
            <Route path = "about" component = {About} />
            <Route path = "contact" component = {Contact} />
        </Route>
    </Router>

), document.getElementById('app'));

也许export不起作用？在我的控制台中，我有一些警告：

index.js：9169警告：React.createElement：type不应为null， undefined，boolean或number。它应该是一个字符串（对于DOM 元素）或ReactClass（用于复合组件）。检查渲染 App的方法。

Answer 1

导入Link的方式不正确。

import Link from 'react-router';

应该是

import { Link } from 'react-router'

使用React Router时无任何显示

1 个答案: