react-router-dom 不适用于我的项目

Question

我安装了react路由器dom以在导航栏元素之间切换。图书馆不想与我的项目合作。点击导航栏元素后，我不会被重定向到所需的组件。有时，当我点击一个选定的项目时，菜单会稍微向左移动。我的代码如下：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

Navbar.js

import React, { useState } from "react";
import App from '../components/App'
import About from '../components/About';
import Services from '../components/Services';
import Contact from '../components/Contact';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";


const Navbar = () => {
const [navLinkOpen, navLinkToggle] = useState(false);
const handleNavLinksToggle = () => {
navLinkToggle(!navLinkOpen);
};
const renderClasses = () => {
let classes = "navlinks";

if(navLinkOpen) {
classes += " ' ' + active";
}
return classes;
};
return (
<nav>
<div className="logo">
<h4>Delightartco</h4>
</div>
<ul className={renderClasses()}>
<Router>
<li className="link"><Link to={"/home"}>Home</Link></li>
<li className="link"><Link to={"/about"}>About</Link></li>
<li className="link"><Link to={"/services"}>Services</Link></li>
<li className="link"><Link to={"/contact"}>Contact</Link></li> 
<Switch>
<Route path="/home" component={App}>
</Route>
<Route path="/about" component={About}>
</Route>
<Route path="/services" component={Services}>
</Route>
<Route path="/contact" component={Contact}>
</Route>
</Switch>
</Router>     
</ul>
<div onClick={handleNavLinksToggle} className="hamburger-toggle">
<i className="fas fa-bars fa-lg"></i>
</div>
</nav>
)
}
export default Navbar;

App.js

import React from 'react';
import '../../src/App.css';
import Navbar from './Navbar';
import Wrapper from './Wrapper';
import {Content, Winnie, Testimonials, Values, Secrets, Footer} from '../components/Content';

function App() {
return (
<div>
<Navbar />
<Wrapper />
<Content />
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer />
</div>
)
}

export default App;

Answer 1

以下是代码中的几个问题：

1. App是根React组件，您给了它一个路由：<Route path="/home" component={App}></Route>。这会导致递归/无限循环。CCD_ 3成分在CCD_
2. 代码结构看起来很复杂

这里有一个建议的固定代码：

索引.jsx:

ReactDOM.render(<App />, document.getElementById("root"));

应用程序.jsx:

export default function App() {
return (
<StrictMode>
<Routes />
</StrictMode>
);
}

Routes.jsx:

export default function Routes() {
return (
<Router>
{/* Route components would be visible only at their route */}
<Switch>
<Route exact path="/about" component={About}></Route>
<Route exact path="/services" component={Services}></Route>
<Route exact path="/contact" component={Contact}></Route>
</Switch>
{/* Below components would be visible always at UI */}
<Navbar />     {/* Top navigation Link's */}
<Wrapper />
<Content />
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer />     {/* Bottom navigation Link's */}
</Router>
);
}

Answer 2

使用react-router时需要记住以下几点。

1. Router或BrowserRouter组件应该包装所有路由和链接。一般来说，如果你的应用程序不需要多个Router，最好用路由器包裹整个应用程序。

2. Link组件的工作就是简单地导航到页面，并且可以在任何想要显示指向某个地方的链接的地方使用，例如在Navbar中。

3. Route(而非路由器)组件的位置非常重要。它应该放在要渲染内容的位置。在您的代码中，您正在Navbar中呈现路由，但由于结构无效/不正确，无法看到正在呈现的路由。

Navbar.js

导航栏应仅包含链接，而Router应位于顶层，Switch / Routes应放置在要呈现内容的位置。

function Navbar() {
return (
<nav>
{/* Move `Router` to top-level e.g. in App.js */}
<ul>
<li className="link">
<Link to={"/home"}>Home</Link>
</li>
<li className="link">
<Link to={"/about"}>About</Link>
</li>
<li className="link">
<Link to={"/services"}>Services</Link>
</li>
<li className="link">
<Link to={"/contact"}>Contact</Link>
</li>
</ul>
{/* Move `Switch and Routes` to where you want to render the content e.g. in Content.js */}
</nav>
);
}

App.js

function App() {
return (
<Router>
<div>
<Navbar />
<Wrapper />
<Switch>
<Route path="/home" component={App}></Route>
<Route path="/about" component={About}></Route>
<Route path="/services" component={Services}></Route>
<Route path="/contact" component={Contact}></Route>
</Switch>
<Winnie />
<Testimonials />
<Values />
<Secrets />
<Footer />
</div>
</Router>
);
}