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

Question

我在理解如何使用 react-router 构建路由和页面时遇到问题，我学习了 react 的原理，目前正在处理 24ways 上的帖子。我面临的问题是导入组件的能力。

例如，我的路由器设置如下：

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

一直在寻找并找不到解决此问题的方法，想使用react-router和react，但如果不可能，目前似乎不可行。根据我对 React 的理解，在彼此之间构建和重用组件的能力是可能的。

这里是导航栏组件：

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

我一直在使用如下路线，我通过great tutorial from 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 ;