在 React Router Dom v5 上，我有一个可以使用嵌套元素的工作代码。V5 代码是：
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" />
{user && (
<>
<Route path="/movies">
<Home type="movie" />
</Route>
<Route path="/series">
<Home type="series" />
</Route>
</>
)}
</Switch>
</Router>
);
};
...现在，当我尝试迁移到 V6 版本时，我无法访问嵌套页面的内容。这两个嵌套路由显示基于“类型”属性的内容，但在 v6 中我根本没有得到任何内容。我看到的只是主页。当我试图通过导航栏导航时，只有链接在改变，但我无法访问 type 元素的内容。
我当前的 v6 代码：
应用程序.jsx：
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} >
<Route path="/movies" element={<Home type='movies'/>} />
<Route path="/series" element={<Home type='series'/>} />
</Route>
</Routes>
</Router>
);
};
主页.jsx：
const Home = ({type}) => {
return (
<div className='home'>
<Navbar />
<Featured type={type} />
<List />
<List />
<List />
<List />
<Outlet />
</div>
)
}
有人可以帮我理解我做错了什么以及为什么反应路由器不加载组件的内容吗？
据我所知，RRDv6 代码不是准确的转换。v6 版本是递归渲染Home组件。嵌套路由也不应该使用绝对路径。
建议
移除Home组件并Outlet从中移除Home并仅渲染两个嵌套路由。如果意图是渲染Home没有任何类型的组件，则使用索引路由。
const Home = ({ type }) => {
return (
<div className='home'>
<Navbar />
<Featured type={type} />
<List />
<List />
<List />
<List />
</div>
);
};
...
<Route path="/">
<Route index element={<Home />} />
<Route path="movies" element={<Home type='movies' />} />
<Route path="series" element={<Home type='series' />} />
</Route>
展平所有路由，去掉Outletfrom Home，和上面基本一样，但是现在使用绝对路径。
const Home = ({ type }) => {
return (
<div className='home'>
<Navbar />
<Featured type={type} />
<List />
<List />
<List />
<List />
</div>
);
};
...
<Route path="/" element={<Home />} />
<Route path="/movies" element={<Home type='movies' />} />
<Route path="/series" element={<Home type='series' />} />
定义一条路线并利用它path来发挥您的优势。换句话说，声明一个路径，其中type是路由路径参数，并检查组件type中的参数Home。
const Home = () => {
const { type } = useParams();
return (
<div className='home'>
<Navbar />
<Featured type={type} />
<List />
<List />
<List />
<List />
</div>
);
};
...
<Route path="/" element={<Home />} />
<Route path="/:type" element={<Home />} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句