我的项目没有出现任何错误,它只是不渲染任何内容。我错过了什么吗?
在 App.js 中,我使用 render props 进行数据传输。
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "./views/Auth";
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route
path="/login"
render={props => <Auth {...props} authRoute="login" />}
/>
<Route
path="/register"
render={props => <Auth {...props} authRoute="register" />}
/>
</Routes>
</Router>
</div>
);
}
export default App;
我在 Auth.js 上获取它,然后检查 props 的值。
import React from "react";
import LoginForm from "../components/auth/LoginForm";
import RegisterForm from "../components/auth/RegisterForm";
const Auth = ({ authRoute }) => {
return (
<>
Learnit
{authRoute === "login" && <LoginForm />}
{authRoute === "register" && <RegisterForm />}
</>
);
};
export default Auth;
最后,我根据 props 的值渲染一个组件
import React from 'react'
const LoginForm = () => {
return (
<div>
<h1>Login</h1>
</div>
)
}
export default LoginForm
我看到你正在使用react-router-dom
v6.x。在 RRDv6 中Route
道具不再需要render
or component
道具,取而代之的是一个element
prop 接受您想要在其上渲染的组件的 JSX 文字path
.
<Router>
<Routes>
<Route
path="/login"
element={<Auth authRoute="login" />}
/>
<Route
path="/register"
element={<Auth authRoute="register" />}
/>
</Routes>
</Router>
路线与路线
路由属性接口
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactElement | null;
index?: boolean;
path?: string;
}
路由组件需要访问之前通过路由 props 提供的内容,然后它们需要使用 React hooks。
-
history
对象现在是navigate
函数来自使用导航
-
location
来自使用位置
-
match
来自useMatch,或者如果您只需要路由匹配参数,则来自使用参数.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)