//
Component(...): Nothing was returned from render.
This usually means a return statement is missing.
Or, to render nothing, return null.
:
// pages/pageA/index.js
import React, { Component } from "react"
import "./style.scss"
import { Button } from "antd-mobile"
class PageA extends Component {
render() {
return (
<div className="page-a">
<Button type="ghost"></Button>
<span>pagea</span>
</div>
)
}
}
export default PageA// routes/index.js
import React from "react"
import { Switch, Route } from "react-router-dom"
import PageA from "@/pages/pageA"
import PageB from "@/pages/pageB"
export default () => {
<Switch>
<Route path="/" component={PageA} />
<Route path="/news" component={PageB} />
</Switch>
}// App.js
import React, { Component } from "react"
import "./App.scss"
import Routes from "./routes"
export default class App extends Component {
render() {
return (
<div className="container">
<Routes />
</div>
)
}
}
//index.js
import React from "react"
import ReactDOM from "react-dom"
import "./index.scss"
import App from "./App"
import * as serviceWorker from "./serviceWorker"
ReactDOM.render(<App />, document.getElementById("root"))
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister()
most of the reasons for searching are that return and parentheses are not on one line, but I am on one line. Can you help me to see what the reason is
? < hr >after adding the setting of return eslint "react/display-name", it will report an error. After turning it off in rule,
here comes another You should not use < Switch > outside a < Router >
then replace the Switch with import {BrowserRouter as Router, Route} from "react-router-dom" Router
and then report A < Router > may have only one child element
so the Router is wrapped with a layer div
page to display normally.
it"s hard