Question

我正在尝试在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链接无法渲染，手动导航到步骤正常。指导将非常感激。控制台中没有错误，应用程序运行正常，除了上述问题。

最诚挚的问候。

Answer 1

如果您要导入：

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

您需要导出如下：

export default class Wizard

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

Answer 2

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

默认导出为export default Wizard;可以通过导入向导轻松导入＆＃39; ./向导/向导＆＃39;;
命名导出，可以export const sqrt = Math.sqrt;完成，并用作＆＃39; lib＆＃39;;

此外，在react-router配置中，您已定义嵌套路由。 Wizard1，Wizard2，Wizard3将在向导组件中呈现。您应该编写像

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>
    );
  }
}

React-Router Links组件声明

2 个答案: