リアクタールーターV4パスの問題

Question

私はリアクタールータードームV4を使用しています。私のホームページへのパスは機能しますが、私のページについてのパスは機能しません。

私はXamppを使っているかどうかは関係ありません。

Index.js

import React from "react"; 
import { render } from "react-dom"; 
import { BrowserRouter as Router, Route } from "react-router-dom"; 
import App from "./components/App"; 
import About from "./components/About"; 

const Root =() => { 
    return (
     <Router> 
      <div> 
       <Route path="/" component={App} /> 
       <Route path="/about" component={About} /> 
      </div> 
     </Router> 
    ) 
} 

render(<Root />, document.getElementById('main')); 

Header.js

import React from "react"; 

const Header =() => { 
    return (
     <div> 
      <ul> 
       <li><a href="/about">About</a></li> 
      </ul> 
     </div> 
    ) 
} 

export default Header; 

About.js

import React from "react"; 

const About =() => { 
    return (
     <p>This is the about page</p> 
    ) 
} 

export default About; 

Answer 1

問題はあなたが単純なHTMLのリンクを使用し、いわゆるされない反応することがありますユーザーがリンクをクリックするとルータモジュールの要素を使用する必要があります。

はメニューのために次のことを試してみてください。

import { Link } from "react-router-dom" 
.... 
<li><Link to='/about'>About</Link></li>