Question

我正在研究一个简单的React项目。我有一个Home组件，当直接放在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> ) } }档案

AVPlayer

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建议您还可以保留{{{ 1}}和<Switch>中的其他路线，如

App

您可以阅读有关 advantages of Dynamic Routing here

的更多信息

React Component不使用反应路由器4进行渲染

2 个答案: