リアクタ：ページリフレッシュなしで新しいビューをレンダリング

Question

こんにちは！私がしようとしているのは、私のリアクションルータを改造して、上のgifに示すように、divの下にレンダリングするのではなく、NavLinkが完全に新しいページをクリックするようにレンダリングすることです。

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; 

ホームコンポーネントのコード、ホームページで使われているナビゲーションバーを保持します。

はここに私のメインのApp.js成分の含有量です。

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; 

何が問題になりましたか？どんな助けもありがとう！ありがとう！

Answer 1

反応ルータv4以上を使用している場合は、次のようになります。

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

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

Homeコンポーネントでルータを再度定義する理由はなぜですか？ Appコンポーネントのルート設定を維持するだけで十分です。お役に立てれば。ハッピーコーディング！