我的 react 路由器有问题。这是我的 /home
组件,登录后看到的第一个页面:
return(
<>
<CustomNavbar />
<Container fluid>
{ loading ? (
<div>Loading...</div>
) : (
<Router>
<ProtectedRoute
path='/home/mem'
render={(props) => <MResult
{...props}
data={data}
users={users} />
}
/>
<ProtectedRoute
path='/home/reading'
render={(props) => <RResult
{...props}
data={readingData}
users={users} />
}
/>
</Router>
)}
</Container>
</>
)
我有一个表,我需要根据网址的第二部分显示不同的数据(我使用自己的组件 ProtectedRoute
来检查身份验证,但行为与我们相同通常的 Route
组件)。
在 CustomNavbar
组件中,我有两个链接:
return(
<Navbar bg="primary" variant="dark">
<Navbar.Brand className='cursor-default'>
<span style={{marginLeft: "10px"}}></span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
{ props.authenticated && (
<>
<Button>
<Link to="/home/reading">Reading</Link>
</Button>
<Button>
<Link to="/home/mem">MemResult</Link>
</Button>
</>
)}
</Navbar.Collapse>
<Navbar.Collapse className='justify-content-end'>
{ props.authenticated && (
<Button onClick={logout}>logout</Button>
)}
</Navbar.Collapse>
</Navbar>
)
问题是,如果我单击导航栏中的链接,我可以看到 url 相应变化,但新组件没有加载,我仍然看到前一个组件。如果我点击浏览器的刷新按钮,则会加载正确的组件,但一旦发生这种情况,单击链接将不会更改任何内容,只会更改网址。
我该如何解决这个问题?
最佳答案
CustomNavbar 组件位于 Router 提供程序之外,这就是链接无法与 Route 组件通信的原因。
解决方案是在顶层渲染 Router 组件,并将 CustomNavbar 渲染为默认路由
return(
<Router>
<Route component={CustomNavbar} />
<Container fluid>
{ loading ? (
<div>Loading...</div>
) : (
<ProtectedRoute
path='/home/mem'
render={(props) => <MResult
{...props}
data={data}
users={users} />
}
/>
<ProtectedRoute
path='/home/reading'
render={(props) => <RResult
{...props}
data={readingData}
users={users} />
}
/>
</Router>
)}
</Container>
</Router>
)
关于javascript - React-router:改变 url 但不改变显示的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61518763/