React-Router Links 组件声明

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 link 不呈现，手动导航到步骤工作正常。指导将不胜感激。除了上述问题外，控制台中没有任何错误，应用程序运行正常。

此致。

Answer 1

如果您要像这样导入：

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

您需要像这样导出：

export default class Wizard

这与 React 或 React Router 没有任何关系；这就是 ES6 模块的工作方式。

Answer 2

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

默认导出完成为 export default Wizard; 它可以通过从 './Wizard/Wizard';
Named export 可以作为 export const sqrt = Math.sqrt; 完成并用作 import { square } from '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>
    );
  }
}

React-Router Links 组件声明

React-Router Links component declaration

reactjs

react-router