[英]Component not rendering after using <Link> on click
I am new with React JS so I am sorry if this problem seems trivial.我是 React JS 的新手,所以如果这个问题看起来微不足道,我很抱歉。
I have set up a <Switch>
along with a number of Routes
in App.js to redirect and link components together.我在 App.js 中设置了一个
<Switch>
和一些Routes
,以将组件重定向和链接在一起。 The first <Redirect>
from App.js goes to ComponentA
where when a div is clicked, it should go to ComponentB
, but that is not the case. App.js 中的第一个
<Redirect>
转到ComponentA
,当单击 div 时,它应该 go 到ComponentB
,但事实并非如此。 After some fiddling, I could get ComponentB
to render but it was ALONG with ComponentA
, and now with more changes, nothing shows up except the header .../componentB
.经过一番摆弄,我可以让
ComponentB
渲染,但它与ComponentA
并列,现在有了更多更改,除了 header .../componentB
之外什么都没有显示。
App.js应用程序.js
import { ComponentA, ComponentB } from './components/Component.js';
import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
<Router exact path="/">
<Switch>
<Route exact path="/componentA" component={ComponentA}/>
<Route exact path="/componentB" component={ComponentB}/>
<Route exact path="/componentC" component={ComponentC}/>
</Switch>
{isLoggedIn ? <Redirect to="/componentA"/> : <Redirect to="/componentC"/>}
// componentC is irrelevant to the question
</Router>
</div>
);
}
ComponentA组分A
import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
function ComponentA() {
return (
<div>
<Router exact path="/">
// ... code
<Link exact to="/componentB">
<div></div>
</Link>
</Router>
</div>
);
}
ComponentB (in the same file as ComponentA) ComponentB (与 ComponentA 在同一个文件中)
function ComponentB() {
return (
<div>Welcome to ComponentB</div>
);
}
I think the second Router
component rendered in ComponentA
is jacking the link navigation.我认为在
ComponentA
中呈现的第二个Router
组件正在顶起链接导航。 This "inner" routing context handles the navigation request and updates the URL in the address bar but doesn't allow the "outer" routing context to see the change and update the Route
that is matched and rendered.此“内部”路由上下文处理导航请求并更新地址栏中的 URL,但不允许“外部”路由上下文查看更改并更新匹配和呈现的
Route
。
Remove the Router
in ComponentA
, also remove the exact
prop from the Link
as it's not a link prop.删除
ComponentA
中的Router
,同时从Link
中删除exact
道具,因为它不是链接道具。
import { Link } from 'react-router-dom';
function App() {
return (
<div>
// ... code
<Link to="/componentB">
<div></div>
</Link>
</div>
);
}
Remove the exact
and path
props from Router
, these are props for Route
components.从
Router
中删除exact
和path
道具,这些是Route
组件的道具。
import { ComponentA, ComponentB } from './components/Component.js';
import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
<Router>
<Switch>
<Route exact path="/componentA" component={ComponentA}/>
<Route exact path="/componentB" component={ComponentB}/>
<Route exact path="/componentC" component={ComponentC}/>
</Switch>
{isLoggedIn ? <Redirect to="/componentA"/> : <Redirect to="/componentC"/>}
// componentC is irrelevant to the question
</Router>
</div>
);
}
You need only one routing context for your application, typically a Router
that wraps App
component.您的应用程序只需要一个路由上下文,通常是包装
App
组件的Router
。 Comb your code for any other nested Router
components and remove them as these will mess with navigation as explained above.梳理任何其他嵌套
Router
组件的代码并将它们删除,因为这些会像上面解释的那样混淆导航。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.