反应路由器V4路径问题
问题描述:
我正在使用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;
答
的问题是,你使用普通的HTML链接,等反应过来就不会被调用当用户点击链接时。您应该使用路由器模块中的Link
元素。
尝试使用下拉菜单中:
import { Link } from "react-router-dom"
....
<li><Link to='/about'>About</Link></li>
+0
谢谢:) 这个作品只是需要确保它有一个关闭''标签或你得到一个错误。 P.S.你知道如何让它工作,所以如果你去'/大约'的网页加载。目前只有当您点击标题链接时,关于页面才会起作用。 –
你是什么意思与“不工作”。你期望如此,而发生什么呢?控制台中是否有可能有助于发现问题的东西? – Meier