Question

我使用的是React Router Dom 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链接，因此当用户单击链接时不会调用React。您应该使用路由器模块中的Link元素。

请尝试以下菜单：

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

反应路由器V4路径问题

1 个答案: