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

和啓動鏈接不呈現，手動導航到這些步驟工作正常。指導將非常感謝。在控制檯中沒有錯誤，除了上述問題，應用程序運行良好。

最好的問候。

Answer 1

如果要導入這樣的：

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

需要導出，如：

export default class Wizard 

這不是真的任何與反應或路由器作出反應;這就是ES6模塊的工作原理。

Answer 2

根據es6語法，爲模塊定義了兩種類型的導出。

1. 默認做出口作爲export default Wizard;可以通過做導入嚮導輕鬆導入「./Wizard/Wizard」;
2. 命名爲導出可以做爲export const sqrt = Math.sqrt;並用作'lib'中的import {square};

另外，在您的react-router配置中，您已定義了嵌套路由。嚮導1，嚮導2，嚮導3將呈現在嚮導組件內。您應該編寫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> 
    ); 
    } 
}