时间戳

首页 > 解决方案 > 如何使用 navlink react 路由器重定向到另一个页面

reactjs - 如何使用 navlink react 路由器重定向到另一个页面

问题描述

我有一个实现反应路由器的反应应用程序。我在我的主组件内的导航栏组件内有我的导航链接。这是我的代码...

我的 index.tsx 文件

import App from './App';

 ReactDOM.render(
  <MemoryRouter>
    <Route component={App}/>
  </MemoryRouter>,
   document.getElementById('root')
);

我的 App.tsx 文件；

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;

在我的 home.tsx 中，我有一个导航栏组件，导航链接所在的位置。

import Navbar from "../../components/Navbar";

export default function Home() {

    return (
        <div>
            <Navbar />
        </div>
    );
}

然后是我的导航栏组件

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>
);

}

我是新来的，因为我已经使用 Angular 一段时间了。我究竟做错了什么？

标签： reactjsreact-router-dom

解决方案

我认为您不必Route在文件中添加标签index.tsx。路由内部路由可能导致问题

您是否尝试过Route仅在 App.tsx 文件中使用（而不是在 index.tsx 中）

只需替换您的index.tsx文件

ReactDOM.render(
  <MemoryRouter>
    <Route component={App}/>
  </MemoryRouter>,
   document.getElementById('root')
);

和

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

推荐阅读