React-Router无法导入组件内的组件

我在理解如何使用react-router来构build路由和页面时遇到了一个问题，我学习了反应的原理，并且正在处理当前位于24ways的post。 我面临的问题是导入组件的能力。

例如，我有我的路由器设置如此：

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

有没有办法，我不必这样做，而是能够直接导入到我的每个组件，例如，而不是：

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

一直在search，并找不到解决这个问题，想使用react-router并作出反应，但目前似乎不可行，如果这是不可能的。 根据我对于构build和重用组件的能力的理解是可能的。

这里是navbar组件：

 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> <a href="#">React-Bootstrap</a> </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> ) } } 

我的服务器的代码如下：

 // 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

我一直在使用类似下面的路线，我通过Egghead.io的一个很好的教程学到了这一点

• 现场演示 ： http : //ec2-52-91-0-209.compute-1.amazonaws.com
• 演示回购 ： https ： //github.com/mikechabot/material-ui-hello-world

App.js（主要条目）

 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 ;