在react-router-dom v6中封装了一些路由给其他组件

Question

我正在使用react，我有这样的app.js:

function App() {
const [data, setData] = useState([]);
useEffect(() => { ... setData([1,2,3]);}, []);
return (
<Router>
<Routes>
<Route element={<SomeElement/>}>
<Route index exact path="/path1" element={<SomeComponent data={data}/>}/>
<Route path="/path2" element={<AnotherComponent data={data}/>}/>
</Routes>
<Router/>);
}

我只是想移动路由，这些路由使用数据来分离组件，因为我只想在需要时加载数据。

我希望看到这样的东西:

function SeparateRoutes(){
const [data, setData] = useState([]);
useEffect(() => { ... setData([1,2,3]);}, []);
return <Fragment>
<Route index exact path="/" element={<SomeComponent data={data}/>}/>
<Route path="/path" element={<AnotherComponent data={data}/>}/> </Fragment>;
}
function App() {
return (
<Router>
<Routes>
<SeparateRoutes/>
<Route index exact path="/" element={<SomeComponent data={data}/>}/>
<Route path="/path" element={<AnotherComponent data={data}/>}/>
</Routes>
<Router/>);
}

我试过这个变体，但有一个错误:组件子必须是一个路由或React。片段

Answer 1

如果你只是想把代码分开一点，在组件中单独渲染路由，那么Route组件的每一组都需要在Routes组件中渲染。

的例子:

import { Routes, Route } from 'react-router-dom';
function SeparateRoutes() {
const [data, setData] = useState([]);
useEffect(() => {
...
setData([1, 2, 3]);
}, []);
return (
<Routes>
<Route path="/path1" element={<SomeComponent data={data} />} />
<Route path="/path2" element={<AnotherComponent data={data} />} /> 
</Routes>
);
}

确保你没有不小心渲染一个自闭的Router组件标签，它应该包装所有需要访问路由上下文的路由和UI内容。

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<SeparateRoutes />
<Routes>
<Route path="/" element={<SomeComponent />} />
<Route path="/path" element={<AnotherComponent />} />
</Routes>
</Router>
);
}

如果你只想获取特定路由的数据，你也可以尝试创建一个布局路由，并呈现嵌套的路由，而不是一个完全独立的组件。

的例子:

import { Outlet } from 'react-router-dom';
function DataLayout() {
const [data, setData] = useState([]);
useEffect(() => {
...
setData([1, 2, 3]);
}, []);
// Pass data state in Outlet context
return <Outlet context={data} />;
}

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<SomeComponent />} />
<Route path="/path" element={<AnotherComponent />} />
<Route element={<DataLayout />}>
<Route path="/path1" element={<SomeComponent />} />
<Route path="/path2" element={<AnotherComponent />} /> 
</Route>
</Routes>
</Router>
);
}

import { useOutletContext } from 'react-router-dom';
export const AnotherComponent = () => {
const data = useOutletContext();
...
};