当我使用我的反应路由器设置单击指向“/”的链接时，为什么我会得到一个空白页面？答案

【问题标题】：Why do I get a blank page when I click on links that point to '/' with my react router setup?当我使用我的反应路由器设置单击指向“/”的链接时，为什么我会得到一个空白页面？
【发布时间】：2020-12-18 19:32:29
【问题描述】：

这基本上就是我的设置方式：

document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(
        <Router>
            <Route path="/" component={App} />
        </Router>,
        document.body.appendChild(document.createElement('div')),
    )
})

const App = function(props) {
    return (
        <>
            <Navigation />
            <Switch>
                <Route exact path="/" component={Home} />
            </Switch>
        </>
    )
}

import React from "react";
import Layout from "../components/Layout"

const Home = function (props) {
    return (
        <Layout>
            The Home Component.
        </Layout>
    )
}

export default Home;

这就是发生的事情。

网站最初加载良好。当我转到localhost:3000 时，我可以看到“这是主页组件”出现在页面上。但是，当我尝试单击指向“/”的链接时，结果是一个完全空白的页面。如果我在空白页面存在时刷新，那么刷新将使内容再次出现并且看起来好像它正在正确加载。但是，一旦我单击带有href="/" 的链接，它就只是一个空白页。

这是我的导航组件（只是一个简单的引导导航，只有 href="/"... 的基本链接）：

const Navigation = function (props) {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container">
                <a className="navbar-brand" href="/">Langsite</a>

                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
            
                <div className="collapse navbar-collapse" id="navbar-content">

                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                        <a className="nav-link" href="/">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    )
}

【问题讨论】：

不要使用常规的<a>标签，而是使用react路由器提供的<Link>组件：reactrouter.com/web/api/Link

标签： reactjs

【解决方案1】：

const Navigation = function (props) {
return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container">
            <Link className="navbar-brand" to="/">Langsite</Link>

            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
        
            <div className="collapse navbar-collapse" id="navbar-content">

                <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                    <a className="nav-link" href="/">Home</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
)

}

这可以解决你的问题

【讨论】：