反应路由器链接不渲染组件但更改 URL答案

【问题标题】：React Router Link Not Rendering the Component but changes the URL反应路由器链接不渲染组件但更改 URL
【发布时间】：2019-12-08 03:58:15
【问题描述】：

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'
               <Router>
                <Fragment>
                    <Navbar />
                    <Switch>
                        <Route exact  path="/" component={Landing}/>
                        <Route   path="/developer/register/" component={RegisterDev} />
                        <Route   path="/developer/login/" component={LoginDev} />
                        <Route   path="/developer/dashboard/" component={Landing} />
                        <Route   path="/agency/register/" component={RegisterAgency} />
                        <Route   path="/agency/login/" component={LoginAgency} />

                        <Route component={NotFound} />
                    </Switch>
                </Fragment>
            </Router>

在我的导航栏组件中

//NavBar.js
<Link to="/"  Home > </Link>

问题是当我在 /developer/register 或 /developer/login 组件中时，如果我单击 Home Link，URL 会更改，但不会呈现 Landing 组件。所有其他组件都可以与 Link 一起正常工作。将主页链接到 / 的唯一问题。我试过 withRouter, , 仍然 URL 更改为 / 但除非我刷新，否则 Landing 组件不会呈现。

现在我正在使用 href / 来逃避这个问题，但我想了解为什么 Link 它不呈现。

【问题讨论】：

你能在沙盒中分享你的代码吗
似乎没有任何问题。您是否收到任何控制台错误。是否有围绕它或在父组件中的路由器相关代码？
控制台很清晰。它只发生在'/'上。所有其他组件导航都工作正常。就像 /developer/login 到 /developer/register。但是从 /developer/register 或任何其他组件到 '/" 会更改 URL，但不会加载 Landing 组件。现在我是
请分享一个沙盒

标签： reactjs react-router-dom

【解决方案1】：

尝试在路由路径中添加精确。

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'
               <Router>
                <Fragment>
                    <Navbar />
                    <Switch>
                        <Route exact  path="/" component={Landing}/>
                        <Route exact   path="/developer/register/" component={RegisterDev} />
                        <Route exact   path="/developer/login/" component={LoginDev} />
                        <Route exact   path="/developer/dashboard/" component={Landing} />
                        <Route exact   path="/agency/register/" component={RegisterAgency} />
                        <Route exact   path="/agency/login/" component={LoginAgency} />

                        <Route component={NotFound} />
                    </Switch>
                </Fragment>
            </Router>

【讨论】：

我已经试过了。无用。我猜想这与Switch有关。还尝试了 DebugRouter，控制台日志路径很好，但它没有为 / 渲染组件
将此行从 Switch 中取出并注释 NotFound Route。它适用于上述场景，但问题是它会与其他所有路由一起加载登录页面。但是如果我把它放在开关之外，链接到 / 就可以了。如果我向内推到 Switch，则组件不会呈现
我想你在 webpack 开发服务器配置中将 historyApiFallback 设置为 true。你已经设置了吗？

【解决方案2】：

我发现了问题。我应该在问题中分享我的登陆页面组件。我在我的 Landing 组件中使用了一些 jquery 滑块。我想反应路由不会加载页面，因为这里的一切都是虚拟 DOM。它使用 href 的原因是因为它正在重新加载整个主页。

通过少量研究我发现LoadJS Package

现在我可以使用加载 js 加载 jquery 滑块脚本，并且我的指向 / 的链接工作正常，没有问题。感谢所有评论和回复的人。我应该发布登陆页面组件。

【讨论】：

【解决方案3】：

<Link to="/"  Home > </Link>

这是什么语法？

您要么尝试将 Home 打印为标签，在这种情况下它应该是

<Link to="/">Home</Link>

或者你正试图把它作为你的路线的一部分，在这种情况下它应该是

<Link to="/Home"/>（虽然这里没有显示文字）

请检查您使用 Link 的 Link 的语法，如果仍然无法使用，请提供沙箱。

【讨论】：