CODEWITHSUNDEEP
reactjsreact-router-dom
Patrick Obafemi
Patrick Obafemi

Reputation: 1066

How to redirect to another page using navlink react router

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

Answers (3)

Anup
Anup

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

FaFa
FaFa

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

Martin Mwangi
Martin Mwangi

Reputation: 1

Have you tried using BrowserRouter instead of MemoryRouter in index.tsx. That normally works for me.

Upvotes: 0

Related Questions