英文:
encapsulating some routes to other component in react-router-dom v6
问题
Here is the translated code:
我正在使用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>
);
}
我尝试了这个变体，但出现了错误：组件的子元素必须是Route或React.Fragment。
请注意，我已经将HTML实体转换成了正常的HTML标记。如果需要进一步的帮助，请告诉我。
<details>
<summary>英文:</summary>
I m using react and i have app.js like this:
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/>);
}
I just want to move routes, which are using data to separate component, since i want to load data only if i need.
I would like to see something like this:
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/>);
}
I`ve tried this variant but there is an error: component children must be a Route or React.Fragment
</details>
# 答案1
**得分**: 1
```jsx
如果你只是尝试将代码分割并在组件中分别呈现路由，那么每组 `Route` 组件都需要在一个 `Routes` 组件中渲染。
示例：
```jsx
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]);
}, []);
// 在 Outlet 上下文中传递 data 状态
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();
...
};
英文:
If you are just trying to split the code up a bit and render routes separately in components then each set of Route components need to be rendered in a Routes component.
Example:
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>
);
}
Make sure you aren't accidentally rendering a self-closed Router component tag, it should wrap all the routes and UI content that needs to access the routing context it provides.
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>
);
}
If you only want data to be fetched for specific routes you might also try creating a layout route and rendering nested routes instead of an entirely separate component with descendent routes.
Example:
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();
...
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论