React应用中从常量导出的导航栏图片无法显示问题

问题场景 #

开发React应用时，尝试从constants文件导出图片URL到Navbar组件的导航栏中，图片无法显示，页面仅呈现空白状态，但已确认图片URL是有效的。改用带return的写法后图片可正常显示。

问题代码 #

src/utils/constants.js #

export const Logo = 'https://www.freepnglogos.com/uploads/youtube-logo-hd-8.png';

src/components/Navbar.js #

import { Stack } from '@mui/material';
import { Link } from 'react-router-dom';

import { Logo } from '../utils/constants';

const Navbar = () => {
  <Stack
    direction="row"
    alignItems="center"
    p={2}
    sx={{ position: 'sticky', background:'#000',top:0, justifyContent:'space-between'}}
    >
    <Link to="/" style={{ display: 'flex', alignItems:'center'}}>
      <img src={Logo} alt="logo" height={45} />
    </Link>
  </Stack>
}

export default Navbar

App.js #

import React from 'react'
import { BrowserRouter, Routes, Route} from 'react-router-dom';
import { Box } from '@mui/material';
import { Navbar, Feed, VideoDetail, ChannelDetail, SearchFeed} from './components';

const App = () => (
    <BrowserRouter>
        <Box>
            <Navbar />
            <Routes>
                <Route path="/" exact element={<Feed />}/>
                <Route path="/video/:id" element={<VideoDetail />}/>
                <Route path="/channel/:id" element={<ChannelDetail />}/>
                <Route path="/search/:searchTerm" element={<SearchFeed />}/>
            </Routes>
        </Box>
    </BrowserRouter>
);

export default App

问题原因 #

函数组件必须返回JSX内容才能完成渲染。当前Navbar组件中，JSX代码直接写在函数体内，但没有通过return语句返回，导致组件没有输出任何内容，页面呈现空白。

解决方案 #

给Navbar组件添加return语句，或者使用箭头函数的隐式返回（用括号包裹JSX），两种方式任选其一即可：

方式1：添加return语句 #

import { Stack } from '@mui/material';
import { Link } from 'react-router-dom';

import { Logo } from '../utils/constants';

const Navbar = () => {
  return (
    <Stack
      direction="row"
      alignItems="center"
      p={2}
      sx={{ position: 'sticky', background:'#000',top:0, justifyContent:'space-between'}}
    >
      <Link to="/" style={{ display: 'flex', alignItems:'center'}}>
        <img src={Logo} alt="logo" height={45} />
      </Link>
    </Stack>
  )
}

export default Navbar

方式2：使用隐式返回 #

import { Stack } from '@mui/material';
import { Link } from 'react-router-dom';

import { Logo } from '../utils/constants';

const Navbar = () => (
  <Stack
    direction="row"
    alignItems="center"
    p={2}
    sx={{ position: 'sticky', background:'#000',top:0, justifyContent:'space-between'}}
  >
    <Link to="/" style={{ display: 'flex', alignItems:'center'}}>
      <img src={Logo} alt="logo" height={45} />
    </Link>
  </Stack>
)

export default Navbar

修改后组件会正确返回JSX内容，图片即可正常显示。

内容的提问来源于stack exchange，提问作者Mitchell