在不同页面中显示组件

Question

我正在实现一个反应应用程序，它由两个主要页面组成，第一页包含一起显示的 4 个主要部分（主页 - 关于 - 产品 - 联系方式），我通过平滑滚动在它们之间导航，现在我希望当我单击特定产品的图像，它会在新页面中打开产品规格页面，因为它会在同一页面中打开，并且组件会添加到联系部分下方。主要是我需要在同一页面中放置 4 个组件，并且其他产品规格组件需要在具有自己路径的新页面中打开。这是代码：

import React from 'react'
import {BrowserRouter , Routes, Route} from "react-router-dom";
import Navbar from './components/Navbar'
import Home from './components/Home'
import About from './components/About'
import Machines from './components/Machines'
import Contact from './components/Contact'
import Product1 from './components/Product1'


function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Home />
      <About />
      <Machines />
      <Contact />
      <Routes>
        <Route path="/product1" element={<Product1 />} />
      </Routes>
    </BrowserRouter>
    
  );
}

export default App;`


//Machines.js
<figure>
  <Link to="/product1" target="_blank"><img src={image1} alt="Image 1" /></Link>
  <figcaption>
    <p>Manual Cocker Machine</p>
   </figcaption>
 </figure>

`

Answer 1

function App() {

return (
  <BrowserRouter>
      <div>
        <Routes>
          <Route path='/' index element={<Home />}></Route>
          <Route path='/home' element={<Home />}></Route>
          <Route path='/about' element={<About />}></Route>
          <Route path='/machines' element={<Machines />}></Route>
          <Route path='/contact' element={<Contact />}></Route>
          <Route path='/product1' element={<Product1 />} ></Route>
        </Routes>
      </div>
  </BrowserRouter>
)}