How do i render a multi site page in ReactJS?

user_19465660 0
Viewed 34

i am trying to render an About page. the link is clickable from the homepage but it redirects the user to a blank page when clicked from the Home page. Here is the About Page code

import React from "react";
            import ReactDOM from "react-dom";
            import "../index.css";
            import maleUser from "../icons8-male-static.png";
            import shipDock from "../img/delivery-cargo.jpg";
            import fastDelivery from "../img/fast-del-truck.svg";
            import supportIcon from "../img/supporticon.svg";
            import gpsIcon from "../img/gps.svg";
            import secureImage from "../img/secureicon.svg";
            
            
            
            const root = ReactDOM.createRoot(document.getElementById('root'));
            root.render(About);
                    function About() {
                        return (
                        <>  
                            {/* Carousel Container  start --- */}
                            <section className="header-carousel">
                            <div className="flex-container">
                                <div className="cargoImage flex-child">
                                <span className="header-intro-text">
                                    <h1>
                                    ABOUT US
                                    </h1>
                    
                                    <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et
                                    felis non <br />
                                    risus vehicula finibus quis et nunc. In diam odio, ultrices
                                    blandit tortor <br />
                                    id, faucibus dignissim elit. Integer aliquet varius sodales.
                                    <br />
                                    </p>
                                </span>
                                </div>
                    
                                <div className="courusel-i-bar flex-child container-l">
                                
                                </div>
                            </div>
                            </section>
                        </>
                        );
                    }
                    
                    export default About;

correct me where i'm getting it wrong guys thanks.

react-dom reactjs
1 Answers

You can look into react-router-dom which allows serving different components on different pages.

Here's an example: (this example uses React Router v6 and JSX)

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom' //BrowserRouter is elegant and very common.

const root = ReactDOM.createRoot(document.getElementById('root'));

const MyComponent = () => {
  return (
    <p>You have arrived to the home page</p>
  )
}
root.render(
  <BrowserRouter> //You would usually want it to be the first component you render.
    <div className="App">
      <p>Anything I put in here will be shown on every page, so a navbar works here.</p>
      <Routes>
        //The only things you can put in here are fragments and <Route> components.
        <Route path="/home" element={<MyComponent/>} />
      </Routes>
    </div>
  </BrowserRouter>
)

In the above example, if the user is not at /home, they will not see what MyComponent renders.

Now to link to a component, one should use the link tag. It can be imported like this:

import {Link} from "react-router-dom"

and used like this:

<Link to="/home" />

All the possible Routers:

NativeRouter and StaticRouter are either react-native and/or server-side only. The React Router we are using is for client-side.

Here is a beginner-friendly tutorial for getting started on the React Router website.

user_164671840
Related