小编ice*_*a06的帖子

我正在学习React自己的在线教程.

所以这是使用React Router的基本示例:

<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>

使用我的App组件:

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 default App;

但是,我在使用IndexRoute时遇到问题,因为它没有显示任何内容,所以我在npm上搜索react-router-dom v4的模块,里面没有IndexRoute.相反,它使用这个:

<Router>
  <div>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
  </ul>
  <hr/>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/contact" component={Contact}/>
  </div>
</Router>

那么如何为1条路径渲染2个组件呢？

概述在main.js中,添加

import Three from 'three'

Vue.use(Three)

使用npm run dev启动dev服务器.预期的行为Vue项目应该加载没有错误.实际行为dev服务器发出以下警告:

warning  in ./src/main.js
    7:8-14 "export 'default' (imported as 'Three') was not found in 'three'

浏览器的js控制台显示错误:

Uncaught TypeError: Cannot read property 'installed' of undefined
at Function.Vue.use (eval at <anonymous> (app.js:723), <anonymous>:3443:15)
at eval (eval at <anonymous> (app.js:778), <anonymous>:14:45)
at Object.<anonymous> (app.js:778)
at __webpack_require__ (app.js:660)
at fn (app.js:84)
at Object.<anonymous> (app.js:964)
at __webpack_require__ (app.js:660)
at app.js:709
at app.js:712

所以，我要的是有一个顶级路由App.js的路由到 Home的“/”。在Home我想渲染一些东西，然后在一个地方我根据路径选择要渲染的内容。

即如果路径是“/”，我想显示一个Link可以带我到“/about”的路径，如果路径是“/about”，我将在About那里显示组件。

在App.js我总是有一个Link可以带我回到“/”。

所以App.js渲染这个：

  <Router>
    <div>          
      <Link to="/">
        <button>Go to home</button>
      </Link>
      <Route exact path="/" component={() => <Home/>} />
      <Route exact path="/other" component={() => <Other/>} />
    </div>
  </Router>

Home 渲染这个：

  <div>
    THIS IS HOME WOO!
    <Router>
      <div>
        <Route exact path="/" component={() => <HomeController/>} />
        <Route exact path="/about" component={() => <About/>} />
      </div>
    </Router>
  </div>

HomeController 渲染这个：

  <Link to="/about">
    <button>Go to about</button>
  </Link>

并About …