React-Router can't import components within components - node.js

Question

I am having a problem understanding how routes and pages should be structured using react-router, I learn the principles of react and am working off of a post placed on 24ways currently. The issue I am facing is the ability to import components.
For example I have my router setup as such:
// Router
export const routes = {
path: '',
component: appComponent,
childRoutes: [
{
path: '/',
components: {nav: navbarComponent, content: indexComponent}
},
{
path: '/join',
component: {nav: navbarComponent, content: joinComponent}
}
]
};
// appComponent
import React from 'react';
export default class appComponent extends React.Component {
render() {
const { nav, content } = this.props;
return (
<div>
<div className="nav">
{nav}
</div>
<div className="content">
{content}
</div>
</div>
);
}
}
Is there a way that I don't have to do this an instead am able to directly import into each of my components, for example this instead:
// Router
export const routes = {
path: '',
component: appComponent,
childRoutes: [
{
path: '/',
components: indexComponent
},
{
path: '/join',
component: joinComponent
}
]
};
// appComponent
import React from 'react';
import Navbar from 'Navbar';
export default class appComponent extends React.Component {
render() {
return (
<div>
<Navbar />
{this.props.children}
</div>
);
}
}
Have been searching all over and can't find a solution to this problem, would like to use react-router and react but it currently does not seem feasible if this is not possible. From my understanding of react the ability to build and reuse components within one another was possible.
Here is the navbar component:
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
export default class navbarComponent extends React.Component {
render () {
return (
<Navbar inverse>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse className="bs-navbar-collapse">
<Nav>
<NavItem eventKey={1} href="/">Home</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="/join">Sign Up</NavItem>
<NavItem eventKey={2} href="/login">Login</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
The code for my server is as follows:
// module imports
import express from 'express';
import http from 'http';
// react imports
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RoutingContext } from 'react-router';
// route imports
import { routes } from './lib/routes';
const app = express();
app.use(express.static('public'));
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.get('*', (req, res) => {
match({ routes, location: req.url }, (err, redirectLocation, props) => {
if (err) {
res.status(500).send(err.message);
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if (props) {
const markup = renderToString(<RoutingContext {...props} />);
res.render('index', { markup })
} else {
res.sendStatus(404);
}
});
});
const server = http.createServer(app);
server.listen(3000);
server.on('listening', () => {
console.log('Listening on 3000');
});

Answer 1

I've been using routes like the following, and I learned this via a great tutorial from Egghead.io
Live demo: http://ec2-52-91-0-209.compute-1.amazonaws.com
Demo repo: https://github.com/mikechabot/material-ui-hello-world
App.js (main entry)
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import routes from './config/routes.jsx';
ReactDOM.render(
<Router>{routes}</Router>,
document.getElementById('my-app')
);
./config/routes.jsx
import React from 'react';
import Main from '../components/Main';
import Index from '../components/Index';
import { Route, IndexRoute } from 'react-router';
export default (
<Route path="/" component={Main}>
<IndexRoute component={Index} />
</Route>
)
../components/Main.jsx
import React from 'react';
class Main extends React.Component {
render() {
return (
<div>
Hello World. Display my children:
{this.props.children}
</div>
);
}
}
export default Main;
../components/Index.jsx
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
I'm the index Route
</div>
);
}
}
export default Index ;