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.