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

Posted 2023-02-22

【中文标题】React-Router 无法在组件内导入组件

【英文标题】：React-Router can't import components within components

【发布时间】：2016-04-21 04:07:42

【问题描述】：

我在理解如何使用 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');
);

【问题讨论】：

感觉我可能在这里遗漏了一些东西，因为您的第二个示例看起来不错。尝试时出了什么问题？

只是不加载组件。生病添加组件。奇怪的是我也没有收到任何错误。

@N3dst4 是否与它是通用/同构的事实有关？

如果你在服务器上渲染，也许吧？你去过github.com/rackt/react-router/blob/latest/docs/guides/advanced/…吗？

我正在使用几乎（如果不完全相同的设置），将为服务器发布代码。

【参考方案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 ;

【讨论】：

感谢您的帮助，但这对我想要实现的目标不起作用，据我所知，这段代码仍然只允许每条路线有一个组件，而每条路线中没有子组件。

@DavidFH 不确定我是否理解 - 您可以将任何您希望的组件添加到 Main 或 Index 的渲染函数中，它们将被相应地渲染。

这是我在初始代码中遇到的问题，即组件的非渲染。对不起，我的误解。我的代码是在没有任何内容的客户端上创建组件。这段代码能让我以通用的方式工作吗？

@DavidFH 如果我们将此示例应用于您的示例，则可以将 childRoutes 数组替换为 <Route path="/" component=IndexComponent> <Route path="/join" component=JoinComponent /> </Route>

您提供的代码示例将允许我渲染服务器端吗？