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: https://isotropic.co/react-multiple-pages/

My structure is :

-node_modules
-public
-src
----components
------Destinations
------Favorites
------NavBar
------Pages
------Footer.jsx
------Footer.module.css
------HomePage.jsx
------App.css
------App.js
------index.js

my app.js i have this code:

function App() {

  return (
    <div className="App">
      <HomePage/>
     
    </div>
  );
}

export default App;

On my homepage.jsx

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

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) => (
  <a
    href=""
    ref={ref}
    onClick={(e) => {
      e.preventDefault();
      onClick(e);
    }}
  > {children} <IoIosArrowDown />
  </a>
));

// 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 (
      <div
        ref={ref}
        style={style}
        className={className}
        aria-labelledby={labeledBy}
      >
        <ul className="list-unstyled">
          {React.Children.toArray(children).filter(
            (child) =>
              !value || child.props.children.toLowerCase().startsWith(value),
          )}
        </ul>
      </div>
    );
  },
);

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

                        <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>
                        </Dropdown.Menu>
                        </Dropdown>
                    <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>
                    <button>{t('sign_up')}</button>
                </div>
            </div>
        </div>
    );
};

CodePudding user response：

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

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

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.