单击菜单时页面不会重定向，只有URL更改-ReactJs

问题描述

在我的App.js中，我有以下代码片段。我要做的就是能够单击首页或左右链接，并呈现页面。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './components/Home';
import Header from './components/Header';
import About from './components/About';
import { browserRouter as Router,Route,Switch } from 'react-router-dom'

function App() {
  return (
    <Router>
    <div className="App">
      <Switch>
        
        <Route path="/" component={Home}>
          <Header />
          <Home />
        </Route>
        <Route path="/about" component={About}>
            
            <About />
        </Route>
       
      </Switch>
    </div>
    </Router>
  );
}

export default App;

在我的Header.js中 当我单击“关于”链接时，更改仅显示在URL上，但没有页面呈现，它保留在默认页面中。

import React from 'react'
import { Link } from 'react-router-dom'


function Header() {
   
    return (
        <div>
            <ul>
                <li><Link to="/" >Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </div>
    )
}

export default Header

我在家中和关于功能的内容相似，但h1标签的标题不同。

import React from 'react'

function Home() {
    return (
        <div>
           <h1> Home </h1>
        </div>
    )
}

export default Home

About.js

import React from 'react'

function About() {
    return (
        <div>
            <h1>About </h1>
        </div>
    )
}

export default About

我不知道还有什么需要做的。

解决方法

您的代码完美无缺，只需重新定位Route，确保默认路由如下所列：

 <Router>
    <div className="App">
      <Switch>
      <Route path="/about" >
            <Header />
            <About />
        </Route>
        <Route path="/">
          <Header />
          <Home />
        </Route>
        
       
      </Switch>
    </div>
    </Router>

“ react-router-dom”文档需要将此内容指向读者。

react-router-dom reactjs reactjs