0

I followed this tutorialpoint and it works well when all the code in main.js. But if i put my code in separated files, it doesn't work:

app.jsx

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

export default class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
                <li><Link to="/Home">Home</Link></li>
                <li><Link to="/About">About</Link></li>
                <li><Link to="/Contact">Contact</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

export class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

export class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router';
import App, { Home, About, Contact } from './app.jsx';

ReactDOM.render((

    <Router history = {browserHistory}>
        <Route path = "/" component = {App}>
            <IndexRoute component = {Home} />
            <Route path = "home" component = {Home} />
            <Route path = "about" component = {About} />
            <Route path = "contact" component = {Contact} />
        </Route>
    </Router>

), document.getElementById('app'));

Maybe export not works ? In my console, i have some warnings:

index.js:9169 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App.

1 Answer 1

2

The way you are importing Link is not correct.

import Link from 'react-router';

should be

import { Link } from 'react-router'
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks ! I forgot it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.