React-Router無法導入組件內的組件

Question

我在理解路由和頁面應該如何使用react-router進行結構化時遇到問題，我學習了反應的原理，並且正在處理當前位於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> 
     ); 
    } 
} 

一直在尋找全國各地，並不能找到一個解決這個問題，想用反應路由器和反應，但它目前似乎沒有可行的，如果這是不可能的。根據我對反應的理解，在另一個內部構建和重用組件的能力是可能的。

這裏是導航欄組件：

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

。 ./compone NTS/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 ;