[英]Why you can't render from 2 JSX element?
My goal is to render <Route />
with array.map
method.我的目标是使用
array.map
方法渲染<Route />
。 Right now, I am trying to pass the return value using react hook, but the problem is localhost:3000/login
return <div>Login</div>
while localhost:3000/dashboard
return nothing.现在,我正在尝试使用 react 钩子传递返回值,但问题是
localhost:3000/login
return <div>Login</div>
而localhost:3000/dashboard
什么都不返回。
My expected result is when I visit localhost:3000/dashboard
the JSX.element return <div>Dashboard</div>
我的预期结果是当我访问
localhost:3000/dashboard
JSX.element 返回<div>Dashboard</div>
App.js应用程序.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const PublicRouteComponents = () => {
return <Route exact path="/login" render={() => <div>Login</div>} />
};
const PrivateRouteComponents = () => {
return <Route exact path="/dashboard" render={() => <div>Dashboard</div>} />
};
function App() {
return (
<Router>
<Switch>
{/* <Route exact path="/login" render={() => <div>Login</div>} />
<Route exact path="/dashboard" render={() => <div>Dashboard</div>} /> */}
<PublicRouteComponents />
<PrivateRouteComponents />
</Switch>
</Router>
);
}
export default App;
edit:编辑:
the current solution is to give up the react hook and went straight to JSX.element目前的解决办法是放弃react hook,直接去JSX.element
function App() {
const PublicRouteComponents = PublicRoutes.map(
({restricted, component, path}, key) => <PublicRoute restricted={restricted} component={component} exact path={path} key={key} />
)
const PrivateRouteComponents = PrivateRoutes.map(
({component, path}, key) => <PrivateRoute component={component} exact path={path} key={key} />
)
return (
<Router>
<Switch>
{PublicRouteComponents}
{PrivateRouteComponents}
</Switch>
</Router>
);
}
But, my instructor told me, if you gave an expression instead of class, when the component inside {PublicRouteComponents}
changes, the app will got re-rendered.但是,我的导师告诉我,如果你给出一个表达式而不是类,当
{PublicRouteComponents}
的组件发生变化时,应用程序将被重新渲染。 Instead if you use <PublicRouteComponents />
, when the class change, only <PublicRouteComponents />
will be re-rendered.相反,如果您使用
<PublicRouteComponents />
,当类更改时,只会重新呈现<PublicRouteComponents />
。
I wish to achieve that.我希望实现这一目标。
After playing around a bit, I found the underlying issue in your first code sample.在玩了一会儿之后,我在你的第一个代码示例中发现了潜在的问题。
Basically, React router demands that the route path
and the exact
props to be set in the children of the Router
component.基本上,React 路由器要求在
Router
组件的子组件中设置路由path
和exact
道具。
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const LoginRoute = () => {
return <Route render={() => <div>Login</div>} />;
};
const DashboardRoute = () => {
return <Route render={() => <div>Dashboard</div>} />;
};
export default function App() {
return (
<Router>
<Switch>
<DashboardRoute exact path="/dashboard" />
<LoginRoute exact path="/login" />
</Switch>
</Router>
);
}
If you move the path
and exact
props to the DashboardRoute
and LoginRoute
components, then react router is unable to match those routes.如果您将
path
和exact
道具移动到DashboardRoute
和LoginRoute
组件,则反应路由器无法匹配这些路由。
See codesandbox查看代码和框
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.