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

Question

I installed react-router-dom to switch between navbar elements. The library does not want to cooperate with my project. After clicking on the navbar element I am not redirected to the required component. Sometimes when I click on a selected item the menu moves slightly to the left. My code looks like this:

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

There are several things to keep in mind when using react-router .

1. The Router or BrowserRouter component should wrap all your routes and your links. Generally, if your app does not need more than one Router , its better to wrap your whole App with the Router.

2. The Link component's job is to simply navigate to the page and can be used anywhere you want to show a link to someplace eg in the Navbar .

3. The Route (not Router) component's placement is very important. It should be placed where you want to render the content. In your code you are rendering the routes in the Navbar and are unable to see the routes being rendered due to invalid / improper structure.

Navbar.js

Your Navbar should only contain the links while the Router should be on the top-level and the Switch / Routes should be placed where you want to render the content.

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

Answer 2

These are few issues in your code:

1. App is your root React component, and you gave it a route: <Route path="/home" component={App}></Route> . This is causing a recursive / infinite loop. App component inside App component.
2. Code structure looks complex.

Here is a proposed fixed code:

index.jsx:

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

App.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>
  );
}