时间戳

首页 > 解决方案 > 反应路由器链接不渲染组件但更改 URL

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

问题描述

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 组件中时，如果我单击主页链接，URL 会更改，但不会呈现 Landing 组件。所有其他组件都可以与 Link 一起正常工作。将主页链接到 / 的唯一问题。我试过 withRouter, , 仍然 URL 更改为 / 但除非我刷新，否则 Landing 组件不会呈现。

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

标签： reactjsreact-router-dom

解决方案

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

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>

推荐阅读