CODEWITHSUNDEEP
javascriptreactjsreact-router
Trong Lam Phan
Trong Lam Phan

Reputation: 2412

Nothing displays when using React Router

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.

Upvotes: 0

Views: 256

Answers (1)

QoP
QoP

Reputation: 28397

The way you are importing Link is not correct.

import Link from 'react-router';

should be

import { Link } from 'react-router'

Upvotes: 2

Related Questions