CODEWITHSUNDEEP
reactjsreact-router
lch
lch

Reputation: 4931

React router not displayed a component

var React = require('react'),
    ReactDOM = require('react-dom'),
    Router = require('react-router').Router,
    Route = require('react-router').Route,
    SiteLanding = require('./components/landing/SiteLanding'),
    KanbanBoard = require('./components/board/KanbanBoard'),
    Navigation = require('./components/navigation/Navigation'),
    bootstrap = require('bootstrap/dist/css/bootstrap.min.css'),
    fontAwesome = require('font-awesome/css/font-awesome.min.css');

class App extends React.Component{

    render(){
        return (
            <div className="landing-container">
                <Navigation />    //Not displayed
                {this.props.children}
            </div>
        );
    }

}

ReactDOM.render((
    <Router>
        <Route path="/" component={SiteLanding} />
        <Route path="/dashboard" component={KanbanBoard}/>
    </Router>), document.getElementById('root'));

module.exports = App;

The component did not display after using react router (only SiteLanding component displayed ). when i tried removing the router, and rendering App component directly, navigation component rendered properly. Is there anything wrong with my routing configuration

Upvotes: 0

Views: 706

Answers (1)

Yair
Yair

Reputation: 192

Your react-router setup won't render your App component at all. It will directly render SiteLanding at '/' and KanbanBoard at '/dashboard'. What you want in this situation likely looks more like this:

ReactDOM.render((
    <Router>
        <Route path="/" component={App} />
          <IndexRoute component={SiteLanding} />
          <Route path="dashboard" component={KanbanBoard} />
        </Route>
    </Router>), document.getElementById('root'));

This way you have a root component (App) that renders on every path, with variability on the child components passed into it. Make sure to import the IndexRoute component at the top for this to work.

I'd recommend also adding some kind of URL history management into the mix - see https://github.com/reactjs/react-router/blob/latest/docs/Introduction.md for more.

Upvotes: 1

Related Questions