首页 文章

React-Router 链接组件声明

提问于
浏览 次
1

我正在尝试在 React 中创建一个简单的向导，并尝试使用来自 Rackt 的 react-router。

我在将外部组件导入路由定义时遇到问题

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import Wizard from './Wizard/Wizard.js'

class Wizard1 extends React.Component  {
  render() {
    return (
      <div><Link to="/step2">#2 lol</Link></div>
    );
  }
}

class Wizard2 extends React.Component  {
  render() {
    return (
      <div><Link to="/step3">#3</Link></div>
    );
  }
}

class Wizard3 extends React.Component  {
  render() {
    return (
      <div>Wizard3</div>
    );
  }
}

render((
  <Router>
    <Route path="/" component={Wizard}>
      <Route path="step1" component={Wizard1}/>
      <Route path="step2" component={Wizard2}/>
      <Route path="step3" component={Wizard3}/>
    </Route>

  </Router>
), document.getElementById('root'))

外部组件Wizard就是这样定义

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

export class Wizard extends React.Component  {

  render() {
    return (
      <Link to="/step1">START</Link>
    );
  }
}

并且 START 链接不会呈现，手动导航到步骤工作正常。指导将非常感激。控制台中没有错误，应用程序运行正常，除了上述问题。

最好的祝福。

reactjs react-router

2 回答

  • 2

    如果您要导入如下：

    import Wizard from './Wizard/Wizard.js'

    您需要导出如下：

    export default class Wizard

    它与 React 或 React Router 没有任何关系;这就是 ES6 模块的工作原理。

    回复于
  • 2

    根据 es6 语法，为模块定义了两种类型的导出。

    • 默认导出为export default Wizard;可以通过从'./Wizard/Wizard'执行导入向导轻松导入;

    • 命名导出，可以export const sqrt = Math.sqrt;完成并用作导入{。 7'来自'lib';

    此外，在react-router配置中，您已定义嵌套路由。 Wizard1，Wizard2，Wizard3 将在Wizard组件内部呈现。你应该写 Wizard.js 之类

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

export default class Wizard extends React.Component  {

  render() {
    return (
      <div>
      <Link to="/step1">START</Link>
      {this.props.children}
      </div>
    );
  }
}
    回复于

相关问题