Question

我知道这个问题已经被问过很多次了，但我似乎无法为一个非常简单的问题找到可行的解决方案。

我正在使用 React Bootstrap 和 React Router 设置一个简单的导航栏

页面在主页上加载，但当点击链接时，URL 会发生变化，但组件不会呈现。当我使用谷歌浏览器进行检查时，标题没有变化。

任何帮助将不胜感激。我已经尝试了我在这里找到的几乎所有东西，使用 withRouter，使用常规和

元素而不是来自 React Bootstrap 的元素。

这是代码，index.js 是常规的 create-react-app 设置

App.js

import React from 'react'; 
import { Home } from './components/pages/Home';
import Navibar from './components/Navibar';
import { LostPets } from './components/pages/LostPets';
import { AdoptPets } from './components/pages/AdoptPets';
import { ContactUs } from './components/pages/ContactUs';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div className="App">

      {/* Navigation Bar */}
      <Router>
        <Navibar />  

        {/* Routes for Pages */}
        <Switch>                  
          <Route exact path='/LostPets' component={LostPets}/>  
          <Route exact path='/AdoptPets' component={AdoptPets}/>               
          <Route exact path='/ContactUs' component={ContactUs}/>   
          <Route exact path='/' component={Home}/>   
        </Switch>
      </Router>
      
    </div>
  );
}

export default App;

Navbar.js

import React from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';

function Navibar () {
    return(

        <Container>
          <Navbar bg="primary" variant="dark" sticky="top">
            <Navbar.Brand href="#home">PETSTT </Navbar.Brand>

            {/* Navigation Bar items */}
            <Nav className="mr-auto">
              <Nav.Link href="#home">Home </Nav.Link>
              <Nav.Link href="#lostpets">Lost Pets </Nav.Link>
              <Nav.Link href="#adoptpets">Adopt Me </Nav.Link>
              <Nav.Link href="#contactus">Contact Us </Nav.Link>
            </Nav>
          </Navbar>
        </Container>  

    ); 

}

所有页面都只是这样的标题文本。

import React from 'react'; 

export const Home = () => {
    return (
        <div>
            <h1> Home </h1>
        </div>
    );
  }

Answer 1

您 Link 将访问错误的网址。您将转到一个哈希网址，该网址会建议使用该 ID 在同一页面上的不同部分。

<Nav.Link href="#lostpets">Lost Pets </Nav.Link>

这与您尝试渲染的路线不匹配。路线正确完成。

<Route exact path='/LostPets' component={LostPets}/>

您应该将 Link 更改为：

<Nav.Link href="/LostPets">Lost Pets </Nav.Link>

反应路由器组件未呈现

1 个答案: