React Router: Render neue Ansicht ohne Seitenaktualisierung

Question

Hallo! Was ich versuche, ist, meinen React-Router so zu überarbeiten, dass der NavLink beim Klicken eine komplett neue Seite rendert, anstatt am unteren Rand des Divs zu rendern, wie im obigen gif gezeigt.

Hier ist der Inhalt meiner Haupt App.js Komponente:

import React, { Component } from 'react'; 
import './App.css'; 
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'; 
import Home from './Home.js'; 
import About from './About.js'; 
import September from './September.js'; 
import Trilogy from './Trilogy.js'; 

class App extends Component { 
    render() { 
    return (
<Router> 
<div> 
<Switch> 
    <Route exact path = '/' component={Home} /> 
    <Route path = '/about/' component = {About} /> 
    <Route path = '/september/' component = {September} /> 
    <Route exact path = '/september/trilogy/' component = {Trilogy} /> 
</Switch> 
    </div> 
    </Router> 
); 
} 
} 
export default App; 

Der Code des Hauptkomponente, die die NavBar hält, die auf der Startseite verwendet wird.

import React, { Component } from 'react'; 
import {BrowserRouter as Router, NavLink, Switch, Route} from 'react-router-dom'; 
import logo from './logo.png'; 
import About from './About.js'; 
import September from './September.js'; 
import Trilogy from './Trilogy.js'; 

let NavBar =() => { 
    return (
    <div> 
    <h2 className = "container2"><NavLink to = '/about/'>About</NavLink> </h2> 
    <img src = {logo} className = "somersetLogo" alt = "somersetLogo" /> 
    <h2 className = "container" ><a href="mailto:contact@somersetproductions.co" className = "mailto">Contact</a></h2> 
    </div> 
) 
} 

class Home extends Component { 
render(){ 
    return (
    <Router> 
    <div> 
    <NavBar /> 
    <Switch> 
    <Route exact path = '/about/' component = {About} /> 
    </Switch> 
    </div> 
    </Router> 
    ) 
    } 
} 

export default Home; 

Irgendeine Idee, was schief gelaufen ist? Jede Hilfe wäre willkommen! Vielen Dank!

Answer 1

Wenn Sie Reagieren Router v4 oder höher verwenden, sollte es so etwas sein.

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

<Link to='/about'> 
    About 
</Link> 

Warum Router definieren Sie wieder in Home Komponente, die nicht benötigt wird. Die Konfiguration der Route in App Komponente wäre genug. Hoffe das hilft. Glückliche Kodierung!