[英]React Component not rendering on using react router 4
我正在研究一个简单的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>
)
}
}
这是因为您使用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里面的某个地方。
使用您似乎正在使用的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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.