尽管代码相同/在其余页面中工作，但 React 站点中一页中的 P 标记未显示

如何解决尽管代码相同/在其余页面中工作，但 React 站点中一页中的 P 标记未显示

可能是某个地方的小错误。我可以从地址栏中看到，当在导航栏中单击 About 页面时，RouteLink 正在工作，但我的 About 组件内的 p 标记的内容没有显示在页面上，尽管代码与其他组件相同和那些工作的人。

从'react'导入React

function CV() {
    return(
        <div id="cv">
            <p>adsfadsfasdfa</p>
            <br>
            </br>
        </div>

    )
}

导出默认简历；

^这显示了来自工作页面/组件的代码示例。但是，下面的一个不起作用。

import React from 'react'

function About() {
    return(
        <div id="about">
            <p>Hi,I'm John. I have a passion for web technologies.</p>
            <br>
            </br>
        </div>

    )
}

export default About;

我的导航栏：

从'react'导入React； 从 'react-router-dom' 导入 {Link}

function NavBar() {
    return(
        <ul>
            <li>
                <Link to="/">John Smith</Link>
            </li>
            <li>
                <Link to="/about">About</Link>
            </li>
            <li>
                <Link to="/portfolio">Portfolio </Link>
                
            </li>
            <li>
                <Link to="/cv">CV</Link>
            </li>
            
        </ul>
    );
}

export default NavBar;

App.js：

import React from 'react';
import Home from './Home';
import Portfolio from './Portfolio';
import CV from './CV';
import {Route} from "react-router-dom";
import NavBar from './NavBar';
import About from './About';

function App() {
  return (
    <div className="App">
       <NavBar />
      <Route exact path='/' component={Home} />
      <Route exact path="./about" component={About} />
      <Route exact path='/portfolio' component={Portfolio} />
      <Route exact path='/cv' component={CV} />
    </div>
  );
}

export default App;
enter code here

解决方法

您可能只是在“关于”页面的路由声明中有一个错字，并希望从 . 中的 path 属性中删除 App.js：

目前：

<Route exact path="./about" component={About} />

但应该是：

<Route exact path="/about" component={About} />

,

在您的 App.js 中，将 <Route exact path="./about" component={About} /> 替换为 <Route exact path="/about" component={About} />，并将 <br/> 作为单个标签替换为 <br></br>。