我的目标是渲染
我的预期结果是当我访问JSX.element返回值
localhost:3000/dashboard时
App.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;
编辑:
当前的解决方案是放弃react钩子,直接转到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>
);
}
但是,我的老师告诉我,如果你给一个表达式而不是类,当
{PublicRouteComponents}
中的组件发生变化时,应用程序将重新呈现。相反,如果您使用
我希望实现这一目标。
在仔细研究了一下之后,我在您的第一个代码示例中发现了潜在的问题。
基本上,React路由器要求在路由器
组件的子组件中设置路由路径
和精确的
道具。
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>
);
}
如果将路径
和精确
道具移动到仪表板路由
和登录路由
组件,则react路由器无法匹配这些路由。
参见代码沙盒
我想调用ReactJS HOC来包装JSX周围的工具提示。 呼叫应能如下所示: 因此,我创建了此函数: 电话: 它说: 函数作为React子函数无效。如果返回组件而不是从渲染返回组件,可能会发生这种情况。或者你想调用这个函数而不是返回它 如何解决?
问题内容: 处理一个项目,差不多完成了,只是整理了HTML,我发现您实际上没有被允许使用的ID只是一个数字, 属性“ id”具有无效值“ 567”。属性ID为ID类型。如上所述,它应该以字母开头并且不能有空格 我可以遍历我的代码并添加一个字母,然后在jQuery中使用该值时将其删除,但这会很混乱,我不需要。 是否有理由不应该将数字用作ID? 问题答案: 这就是规范所说的。 根据HTML 4规范:
我有一个函数组件,它返回一个锚点元素,该元素可以具有属性和,这取决于传递给它的: 创建此组件时,我首先尝试通过,而不使用像这样的扩展运算符:
问题内容: 我正在尝试将伪元素与元素一起使用。 考虑一下HTML和CSS … HTML CSS 这不会产生预期的效果(已在Chrome 13和Firefox 6中测试)。但是,它可以使用或元素。 为什么不? 有没有一种方法可以使伪元素与元素一起使用? 问题答案: 规范说 … 注意。该规范并未完全定义替换元素(例如HTML中的IMG)以及与替换元素的交互。这将在以后的规范中更详细地定义。 我猜这意味
我试图找到这个按钮并点击它。但我得到了这个错误: 我注意到它正在寻找不同的字符串bc它在类名前面添加了这个点。这是问题吗? 非常感谢。
我遇到了这个简单的React函数组件,它渲染四次,而我希望它最初渲染一次,执行useffect更新状态,然后再次渲染。相反,控制台发送4个日志输出,表示它渲染了4次。了解react功能组件的基本生命周期的原因和资源吗? https://codesandbox.io/s/solitary-tree-t120d?file=/src/App.js:149-191