使用反应路由器 4 不渲染反应组件

Posted 2023-02-22

【中文标题】使用反应路由器 4 不渲染反应组件

【英文标题】：React Component not rendering on using react router 4

【发布时间】：2018-08-26 06:49:26

【问题描述】：

我正在做一个简单的演示 React 项目。我有一个 Home 组件，当直接放置在 main.js 中时会渲染它，但是当放置在 Routes.js 中的 Router 内时，它不会被渲染。谁能告诉我我在这里做错了什么？

main.js文件

import React from "react";
import render from "react-dom";
import App from "./app/App";
import Routes from "./app/Routes";

render( <Routes />,
    document.getElementById("root")
)

Routes.js文件

import React from "react";

import 
   BrowserRouter as Router,  
   Route, 
    Switch,
     from "react-router-dom";

import App 
    from "./App";

import Home from "./components/Home";

export default function Routes(props) 

    console.log('Routes');
    return (
        <Router>
            <App>
                <Switch>
                    <Route path="/" exact  component=Home />
                </Switch>  
            </App>
       </Router>
    )

App.js文件

import React from "react";
import Header from "./components/Header";

export class App extends React.Component 

    render() 
        console.log("App render");

        return (
            <div>
                <h1> Welcome to React </h1>
                <Header/>
            </div>          
        )      
    

Header.js文件

import React, Component from 'react';
import NavLink from 'react-router-dom';

export default class Header extends Component 

    render() 
        console.log("Header render");

        return (
            <div>
                <NavLink to="/" exact>
                    Home
                </NavLink>                                   
            </div>
       )
    

Home.js文件

import React, Component from "react";

export default class Home extends Component 

    render() 
        console.log("Home render");

        return (
            <div> 
                <h2>Hello World!</h2>
            </div>
        )
    
 

【参考方案1】：

这是因为您使用 App 组件作为整个应用的包装器，并将 Switch 定义为 App 组件的子组件，因此您需要在 App 内部使用 this.props.children。

像这样：

export class App extends React.Component 
    render() 
        console.log("App render");
        return (
            <div>
                <h1> Welcome to React </h1>
                <Header/>
                this.props.children
            </div>          
        )  
    

考虑一下这个例子，让整个画面更清晰，如果你写：

<App>
   <Home />
</App>

意味着Home 将作为子组件传递给 App 组件，它不会自动在 App 内部呈现，您需要将 this.props.children 放在 App 内部的某个位置。

【讨论】：

谢谢，伙计。它有帮助。

【参考方案2】：

使用您似乎正在使用的 react-router-v4，可以使用动态路由，这意味着您可以在嵌套组件中添加路由，因此除了@MayankShukla 建议的解决方案之外，您还可以保留@987654322 @和App内的其他路由点赞

export default function Routes(props) 

    console.log('Routes');
    return (
        <Router>
            <App/>
       </Router>
    )


export class App extends React.Component 

    render() 
        console.log("App render");

        return (
            <div>
                <h1> Welcome to React </h1>
                <Header/>
                <Switch>
                    <Route path="/" exact  component=Home />
                </Switch>  
            </div>          
        )      
    

您可以阅读更多关于 advantages of Dynamic Routing here