How to create pages in React

I’m new to this, but I have come a long way.

I ran npm install react-router-dom in the terminal and add the pages I want in the src/components/pages.

My main page is HomePage.jsx but that page is blank, I can´t see anything.
and in the inspect I can see:

Uncaught Error: useHref() may be used only in the context of a component

I can´t find what the problem is, I miss something.

I follow this tutorial:

My structure is :


my app.js i have this code:

function App() {

  return (
    <div className="App">

export default App;

On my homepage.jsx

export const HomePage = () => {
    return (
            <NavBar />
            <Search />
            <Favorites />
            <YoutubeAd />
            {/*<TopAttractions />*/}
            {/*<TopDestinations />*/}
            {/*<TopCountries />*/}

and in NavBar.jsx is the menu:

    import { BrowserRouter, Route, Link } from "react-router-dom";
// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
    onClick={(e) => {
  > {children} <IoIosArrowDown />

// forwardRef again here!
// Dropdown needs access to the DOM of the Menu to measure it
const CustomMenu = React.forwardRef(
  ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
    const [value, setValue] = useState('');

    return (
        <ul className="list-unstyled">
            (child) =>
              !value || child.props.children.toLowerCase().startsWith(value),

export const NavBar = () => {
  const { t } = useTranslation();
    return (
            <div className={styles.navbar}>
                <div className={styles.navLogo}>
                <Link to="/"><img src="logo_286.png" /></Link>
                <div className={styles.navLinks}>
                    <div><MdLanguage /> {t('language')}</div>
                    <div><Link to="/about">{t('about_us')}</Link></div>
                            <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">{t('fishing_trips')}

                        <Dropdown.Menu as={CustomMenu}>
                        <Dropdown.Item eventKey="1"><Link to="/private_charter">{t('private_charter')}</Link></Dropdown.Item>
                        <Dropdown.Item eventKey="2"><Link to="/full_day_fishing">{t('full_day_fishing')}</Link></Dropdown.Item>
                        <Dropdown.Item eventKey="1"><Link to="/half_day_fishing">{t('half_day_fishing')}</Link></Dropdown.Item>
                    <div><Link to="/help"><BiHelpCircle /> {t('help')}</Link></div>
                    <div><Link to="/contact"><FiMail /> {t('contact')}</Link></div>
                    <div><FiShoppingCart /> {t('cart')}</div>
                    <div><Link to="/login"><HiOutlineUserGroup /> {t('log_in')}</Link></div>

>Solution :

You need to have a Router Defined with the routes first for Example like this.

    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="blogs" element={<Blogs />} />
      <Route path="contact" element={<Contact />} />
      <Route path="*" element={<NoPage />} />

This is taken from the tutorial you referred. In The Code above, you can use it on App.js.
For example, you have a Page FullDayFishing.jsx. And you want it to be mapped /full_day_fishing.
To do that you import it and use the following line of code :
<Route path="full_day_fishing" element={<FullDayFishing />} />
This is how you define a route.
Now you can use Link to link it anywhere on the Application.

Leave a Reply