LoginSignup
0
0

More than 3 years have passed since last update.

【React】Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.の対処法

Posted at

症状

ReactでReact-Router-Domを実行しようとしていた時に、下記エラーが発生しました。
コンソールにはエラーメッセージが表示されていませんでした。

image.png

翻訳すると、
「エラー:App(...):レンダリングから何も返されませんでした。これは通常、returnステートメントが欠落していることを意味します。または、何もレンダリングしない場合は、nullを返します。」でした。

つまり、APP.jsから何も返ってきていないといわれているとのこと。

該当のAPP.jsはこのようになっていました。(SampleA.jsxに関しては今回関係なかったので割愛)

App.js
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import {SampleA} from './containers/SampleA.jsx'
import {SampleB} from './containers/SampleB.jsx'
import {SampleC} from './containers/SampleC.jsx'

function App() {
 <Router>
   <Switch>
    <Route 
          exact
          path="/sampleA">
    <SampleA />
    </Route>
    <Route 
          exact
          path="/sampleB">
    <SampleB />
    </Route>
    <Route 
          exact
          path="/sampleC">
    <SampleC />
    </Route>
  </Switch>
 </Router>
}
export default App;

解決策

APP.jsにreturnの記載がなかったため、APP.jsからのreturnがないと怒られていたようです。
APP.jsにreturnを追加したら、正常に動作するようになりました。

App.js
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import {SampleA} from './containers/SampleA.jsx'
import {SampleB} from './containers/SampleB.jsx'
import {SampleC} from './containers/SampleC.jsx'

function App() {
  return (
 <Router>
   <Switch>
    <Route 
          exact
          path="/sampleA">
    <SampleA />
    </Route>
    <Route 
          exact
          path="/sampleB">
    <SampleB />
    </Route>
    <Route 
          exact
          path="/sampleC">
    <SampleC />
    </Route>
  </Switch>
 </Router>
  )
}
export default App;

参考

コンポーネントから返り値が返ってこない
https://teratail.com/questions/313829

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0