React路由器dom连接URL，但没有任何呈现

Question

我是React路由器dom 6^4 lib的新手。遇到麻烦了。使用c--a模板，已经有两个简单的组件(登录表单和注册表单(。根据文档，我必须在入口点创建一个BrouserRouter实例。

import {
createBrowserRouter,
RouterProvider,
Route,
} from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <App />,
}
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);

然后将我的组件作为子添加到路由器

children: [
{
path: "sign_up",
element: <SignUp />
},
{
path: "log_in",
element: <LogIn />
}   ]

并在应用程序组件中创建链接

<Link to={"sign_up"}>Sign Up</Link>
<Link to={"log_in"}>Log In</Link>

最后我看到了链接，React router dom将我传递给"path"prop的URL连接起来，但没有任何呈现。我在哪里犯了错误？

保留所有必需的进口产品。也许我应该传递到"路径"道具到我的comp的相对路径，但它也不起作用。Git

Answer 1

您需要在父路由元素中添加<Outlet />(react router dom的一部分((您的情况是在App中(。此位置将绘制当前子路线数据。

查看此文档-https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md#nested-路由