2017-04-02 207 views
0

我正在使用React路由器Dom V4,我的路徑到我的主頁工作,但我的路徑到我的關於頁面不起作用。反應路由器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; 
+0

你是什麼意思與「不工作」。你期望如此,而發生什麼呢?控制檯中是否有可能有助於發現問題的東西? – Meier

回答

3

的問題是,你使用普通的HTML鏈接,等反應過來就不會被調用當用戶點擊鏈接時。您應該使用路由器模塊中的Link元素。

嘗試使用下拉菜單中:

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

謝謝:) 這個作品只是需要確保它有一個關閉''標籤或你得到一個錯誤。 P.S.你知道如何讓它工作,所以如果你去'/大約'的網頁加載。目前只有當您點擊標題鏈接時,關於頁面纔會起作用。 –