如何使用 React Routing 将图像作为背景放置在 ReactJS 中的多个组件下？

我们可以制作一个父组件并使用该父组件来包装子组件，以便父组件显示为子组件上方的图像叠加层。

句法：


  {props.children}

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

文件名-App.js：

Javascript

import { React, Component } from 'react'
import Parent from './Parent'
class App extends Component {
 
  render() {
    return (
      
        
          
            This component has a background image
          
        
      
    )
  }
}
 
export default App

Javascript

import React ,{Fragment} from 'react'
import { withRouter } from 'react-router-dom';
 
const Parent = (props) => {
    const URL =
'https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg'
    return (
    
        
            {props.children}
        
        
    )
}
 
export default withRouter(Parent);

文件名-Parent.js：

Javascript

import React ,{Fragment} from 'react'
import { withRouter } from 'react-router-dom';
 
const Parent = (props) => {
    const URL =
'https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg'
    return (
    
        
            {props.children}
        
        
    )
}
 
export default withRouter(Parent);

步骤：将此组件包装在路由交换机组件之上作为示例

<家长>

<开关>

<路由路径=”/testpage” 组件={Test} />

<路由路径=”/testpage1” 组件={Test1} />

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：