Reputation: 1066
I have a react app that is implementing react router. i have my navlinks inside my navbar component inside my home component. Here is my code...
My index.tsx file
import App from './App';
ReactDOM.render(
<MemoryRouter>
<Route component={App}/>
</MemoryRouter>,
document.getElementById('root')
);
my App.tsx file;
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Route, BrowserRouter as Router, Switch, useLocation } from "react-router-dom";
import './App.css';
import Home from './screens/Home/Home';
import Business from './screens/Business/BusinessHome';
import Category from './screens/Category';
import ProHome from './screens/Pro/ProHome';
import HireKreator from './screens/HireKreator';
import CategoryHome from './screens/CategoryHome';
import Articles from './screens/Articles';
import Login from './screens/Login';
function App() {
const location = useLocation();
return (
<div className="App">
<TransitionGroup>
<CSSTransition classNames="fade" timeout={300} key={location.key}>
<Router>
<Switch location={location}>
<Route exact path="/">
<Home />
</Route>
<Route path='/pro'>
<ProHome />
</Route>
....
</Switch>
</Router>
</CSSTransition>
</TransitionGroup>
</div>
);
}
export default App;
In my home.tsx, i have a navbar component where the navlinks are situated.
import Navbar from "../../components/Navbar";
export default function Home() {
return (
<div>
<Navbar />
</div>
);
}
Then my navbar component
import React, { useRef, useState } from "react";
import logo from "../../images/logo.png";
import './Navbar.css';
import * as HeroIcons from '@heroicons/react/outline';
import { NavLink } from "react-router-dom";
import { Transition } from "@tailwindui/react";
export default function Navbar() {
const boxRef = useRef(null);
// const boxOutsideClick = OutsideClick(boxRef);
const [open, setOpen] = useState(false);
const openNav = () => setOpen(!open);
return (
<div className="font-sans text-gray-500 font-semibold">
<div className="flex justify-between lg:justify-between p-6 md:bg-transparent z-0">
<div className="flex items-center">
<img src={logo} alt="logo" className="h-10" />
<ul className="hidden lg:flex">
<li className="mx-3 text-red-500 font-bold"><NavLink to="/pro">Kreative Pro</NavLink></li>
</ul>
</div>
</ul>
<ul className="flex">
<li className="mx-3"><NavLink to="/articles">Articles</NavLink></li>
</ul>
<button className="bg-red-500 w-32 py-2 rounded-full mx-4 text-white font-semibold">Login</button>
</nav>
<HeroIcons.MenuAlt3Icon onClick={openNav} className="h-10 lg:hidden" />
</div>
{open ? <div ref={boxRef} className="h-screen absolute inset-0 bg-black opacity-50 z-10"></div> : ''}
....
</div>
);
}
I am new to react as i have been using angular for a while. What am i doing wrong?
Upvotes: 0
Views: 5030
Reputation: 629
I dont think you have to add a Route
tag in your index.tsx
file. Route inside route might be causing the issue
Have you tried using Route
only in the App.tsx file (not in index.tsx)
Just Replace your index.tsx
file
ReactDOM.render(
<MemoryRouter>
<Route component={App}/>
</MemoryRouter>,
document.getElementById('root')
);
with
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Upvotes: 1
Reputation: 398
Maybe you can try to put the navlink outside the li element like this
<NavLink to="/articles"><li className="mx-3">Articles</li></NavLink>
Also in app.tsx I think you should put the <Router>
as the main container and not the div classname app. And render app in index.tsx without
<MemoryRouter>
<Route />
Upvotes: 0
Reputation: 1
Have you tried using BrowserRouter instead of MemoryRouter in index.tsx. That normally works for me.
Upvotes: 0