React 不会使用路由器渲染我的组件答案

【问题标题】：React won't render my components using routerReact 不会使用路由器渲染我的组件
【发布时间】：2021-09-26 01:14:53
【问题描述】：

我对第一个网站的反应和尝试工作非常陌生。我试图在网上寻找我的问题，我遇到了与我类似的问题，但无法弄清楚我的确切问题。

我的组件布局是向下滚动样式（组合），当我尝试路由到我的联系人组件时，除非我刷新我的页面，否则它不会呈现。也不会向下滚动到组件，它会在顶部弹出。（希望我很清楚）

我的应用功能

import { useState } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Contact from './Components/Contact/Contact';
import Form from './Components/FormArea/Form/form';
import Introdoction from './Components/Introdoction/Introdoction';
import NavBar from './Components/NavBar/NavBar';
import NavigationBar from './Components/NavigationBarHeader/NavigationBar/NavigationBar';
import Portfolio from './Components/Portfolio/Portfolio';
import Routing from './Components/Routing/Routing';
import Skills from './Components/Skills/Skills';



function App() {
 
  return (
    <BrowserRouter>
    <Switch>
    <div className="App">
      
      <NavigationBar/>
     
      <section className="section">
      
        <Route path="/contact" component={Contact} exact/>
        <Introdoction/>
        <Portfolio/>
        <Skills/>
        {/* <Contact/> */}
        <Form/>
      </section>
    </div>
    </Switch>
  </BrowserRouter>
  );
  
}

export default App;

我正在尝试为此示例配置“联系人”组件。

我的菜单/导航栏组件

import { Component, MouseEventHandler } from "react";
import {MenuItems} from "../MenuItems/MenuItems";
import "./NavigationBar.css";
import icon from '../../../Assets/icon.png'
import  {Button}  from "../Button/Button";
import { NavLink, Redirect, Route, Switch, useHistory } from "react-router-dom";
import Contact from "../../Contact/Contact";


class NavigationBar extends Component {
    state = {clicked : false}

    handleClick = () => {
        this.setState ( { clicked: !this.state.clicked } );
      };

    public render(): JSX.Element {
        return (
          
            <nav className="NavbarItems ">
                <img className="navbar-logo"src={icon } />
                <div className="menu-icon" onClick={this.handleClick}>
                    <i className={this.state.clicked ? 'fas fa-times' : 'fas times'}></i>

                </div>

                <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>

                    {MenuItems.map((item,index) => {
                        return (

                            <li key={index}>

                        <NavLink to={item.url} className={item.cName} >{item.title} </NavLink>
                        
                            </li>
                        )
                    })}

                    
                </ul>
                <Button>Sign up</Button>
               
            </nav>
        );
    }
}



export default NavigationBar;

ItemMenu 组件

import { NavLink } from "react-router-dom";
import "./MenuItems.css";

export const MenuItems = [
    {
        title: 'Home',
        url: '/Home',
        cName: 'nav-links'
    },
    {
        title: 'Introduction',
        url: '/introduction',
        cName: 'nav-links'
    },
    {
        title: 'Skills',
        url: '/skills',
        cName: 'nav-links'
    },
    {
        title: 'Projects',
        url: '/projects',
        cName: 'nav-links'
    },
    {
        title: 'Contact',
        url: '/contact',
        cName: 'nav-links'
    },
];

如果需要，我可以添加更多信息。我希望我的问题很清楚我的问题是什么。

谢谢。

【问题讨论】：

标签： html css reactjs routes

【解决方案1】：

如果我正确理解了您的问题，您需要一个页面，所有内容都在彼此下方，当您按下链接时，它会将您向下滚动到该位置。在那种情况下，我会使用：

<a href="#contact"></a>
<Contact id="contact" />

react-router 会创建你不想要的新子页面（如果我理解正确的话）

【讨论】：