CODEWITHSUNDEEP
reactjsreact-router
Łukasz Młynik
Łukasz Młynik

Reputation: 632

React-Router Links component declaration

I'm trying to make a simple wizard for in React and trying to use react-router from Rackt.

I have issues with importing external components to the routing defintion

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

And the external component Wizard is defined like this

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

export class Wizard extends React.Component  {

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

And the START link doesn't render, manually navigating to the steps works fine. Guidance would be much appreciated. There are no errors in the console and the app runs fine except the aforementioned issue.

Best Regards.

Upvotes: 1

Views: 5920

Answers (2)

sandeep
sandeep

Reputation: 2138

As per es6 syntax there are 2 types of export defined for a module.

  1. Default export done as export default Wizard; It can be imported easily by doing import Wizard from './Wizard/Wizard';
  2. Named export which can be done as export const sqrt = Math.sqrt; and used as import { square } from 'lib';

Also, in your react-router configuration you have defined nested routes. Wizard1, Wizard2, Wizard3 will be rendered inside Wizard component. You should write Wizard.js like

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

Upvotes: 2

taion
taion

Reputation: 2837

If you are importing like:

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

You need to export like:

export default class Wizard

It's not really anything to do with React or React Router; that's just how ES6 modules work.

Upvotes: 2

Related Questions