我有一个正在实现反应路由器的反应应用程序。我在我的主页组件中的导航栏组件中有我的导航链接。这是我的代码...
我的 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 一段时间了。我做错了什么?
答案 0 :(得分:1)
我认为您不必在 Route
文件中添加 index.tsx
标签。路由内部路由可能导致问题
您是否尝试过仅在 App.tsx 文件中使用 Route
(不在 index.tsx 中)
只需替换您的 index.tsx
文件
ReactDOM.render(
<MemoryRouter>
<Route component={App}/>
</MemoryRouter>,
document.getElementById('root')
);
与
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
答案 1 :(得分:0)
您是否尝试过在 index.tsx 中使用 BrowserRouter 而不是 MemoryRouter。这通常对我有用。
答案 2 :(得分:0)
也许你可以像这样尝试将导航链接放在 li 元素之外
<NavLink to="/articles"><li className="mx-3">Articles</li></NavLink>
也在 app.tsx 中,我认为您应该将 <Router>
作为主容器而不是 div 类名应用程序。并在 index.tsx 中渲染应用程序而无需
<MemoryRouter>
<Route />