React Route отображает различное изображение баннера для каждого маршрута

Question

Это моя страница макета, на которой выполняется маршрутизация:

 import React from 'react';
    import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
    import Header from './Header';
    import Footer from './Footer';
    import Banner from './Banner';
    import Home from './Home';
    import About from './About';
    import Services from './Services';
    import Book from './Book';

    function Layout() {
        return(
            <Router>
                <Header/>
                <Banner/>
                <Route exact path="/" component={Home}/>
                <Route exact path="/Home" component={Home}/>
                <Route exact path="/About" component={About}/>
                <Route exact path="/Services" component={Services}/>
                <Route exact path="/Book" component={Book}/>
                <Footer/>
            </Router>
        )
    }

    export default Layout;

Это компонент Banner:

import React from 'react';
import Jumbotron from 'react-bootstrap/Jumbotron';

function Banner(props) {
    const heroStyle = {
        backgroundImage: "url(" + require('../images/home-hero-image.jpg') + ")"
    };

    return (
        <div>
            <Jumbotron style={heroStyle}>
                <h1 className="centerme">Live your best life</h1>
                <p className="centerme">
                    <a href="#" className="jumbotron-book-now-button">Get Coaching</a>
                </p>
            </Jumbotron>
        </div>
    );
}

export default Banner;

В основном у меня есть другое изображение баннера для Home, About и Службы и хотите обновить URL-адрес изображения в зависимости от страницы, которая используется в данный момент.

Я не уверен, что наилучшим способом достижения этой цели будет.

Answer 1

После добавления реквизитов маршрутизатора вы сможете отобразить баннер, а затем получить доступ к location.pathname внутри Banner.

Примечание withRouter и компонент BannerWithRouter:

import React from 'react'
import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom'
import Header from './Header'
import Footer from './Footer'
import Banner from './Banner'
import Home from './Home'
import About from './About'
import Services from './Services'
import Book from './Book'

const BannerWithRouter = withRouter(({ location }) => <Banner {...props} />)

function Layout() {
  return (
    <Router>
      <Header />
      <BannerWithRouter />
      <Route exact path='/' component={Home} />
      <Route exact path='/Home' component={Home} />
      <Route exact path='/About' component={About} />
      <Route exact path='/Services' component={Services} />
      <Route exact path='/Book' component={Book} />
      <Footer />
    </Router>
  )
}

export default Layout

Компонент баннера: (Обратите внимание, что теперь у вас есть реквизит location)

import React from 'react'
import Jumbotron from 'react-bootstrap/Jumbotron'

function Banner({ location }) {
  const heroStyle = {
    backgroundImage: 'url(' + require('../images/home-hero-image.jpg') + ')'
  }

  console.log(location.pathname)

  if (location.pathname === '/about') {
    return 'This is the about page'
  }

  return (
    <div>
      <Jumbotron style={heroStyle}>
        <h1 className='centerme'>Live your best life</h1>
        <p className='centerme'>
          <a href='#' className='jumbotron-book-now-button'>
            Get Coaching
          </a>
        </p>
      </Jumbotron>
    </div>
  )
}

export default Banner