React Component不使用反應路由器4進行渲染

Question

我正在研究一個簡單的React項目。 我有一個Home組件，當直接放在main.js時會被渲染，但是當放在Routes.js的Router內Routes.js ，它不會被渲染。 任何人都可以讓我知道我在這里做錯了什么？

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

Answer 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里面的某個地方。

Answer 2

使用您似乎正在使用的react-router-v4，可以使用動態路由，這意味着您可以在嵌套組件中添加路由，因此除了@MayankShukla建議您還可以保留<Switch>和其他的解決方案之外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>          
        )      
    }
}

您可以在此處閱讀有關動態路由優勢的更多信息