[英]How to use navigator outside a react component in react-router v6,like axios interceptor
[英]Is it possible to use multiple outlets in a component in React-Router V6
我在应用程序中使用 React Router v6。 我有一个布局页面,它使用一个插座来显示主要内容。 我还想包括一个标题部分,该部分根据匹配的路径而变化,但我不确定如何执行此操作。
function MainContent() {
return (
<div>
<div>{TITLE SHOULD GO HERE}</div>
<div><Outlet /></div>
</div>
);
}
function MainApp() {
return (
<Router>
<Routes>
<Route path="/projects" element={<MainContent />} >
<Route index element={<ProjectList />} title="Projects" />
<Route path="create" element={<CreateProject />} title="Create Project" />
</Route>
<Routes/>
</Router>
);
}
这样的事情可能吗? 理想情况下,除了标题之外,我还希望有一些我可以通过这种方式控制的其他道具,所以一个好的组织系统来进行这样的更改会很棒。
最直接的方法是将title
属性移动到MainContent
布局包装器并单独包装每个路由,但是您将丢失嵌套路由。
另一种方法是创建一个 React 上下文来保存title
state 并使用包装器组件来设置标题。
const TitleContext = createContext({
title: "",
setTitle: () => {}
});
const useTitle = () => useContext(TitleContext);
const TitleProvider = ({ children }) => {
const [title, setTitle] = useState("");
return (
<TitleContext.Provider value={{ title, setTitle }}>
{children}
</TitleContext.Provider>
);
};
更新MainContent
以访问useTitle
挂钩以获取当前title
值并呈现它。
function MainContent() {
const { title } = useTitle();
return (
<div>
<h1>{title}</h1>
<div>
<Outlet />
</div>
</div>
);
}
TitleWrapper
组件。
const TitleWrapper = ({ children, title }) => {
const { setTitle } = useTitle();
useEffect(() => {
setTitle(title);
}, [setTitle, title]);
return children;
};
并更新路由组件以包装在TitleWrapper
组件中,在此处传递title
属性。
<Route path="/projects" element={<MainContent />}>
<Route
index
element={
<TitleWrapper title="Projects">
<ProjectList />
</TitleWrapper>
}
/>
<Route
path="create"
element={
<TitleWrapper title="Create Project">
<CreateProject />
</TitleWrapper>
}
/>
</Route>
这样, MainContent
可以被认为是一组路由的通用 UI,而TitleWrapper
(您可以选择更合适的名称)可以被认为是特定于路由的 UI。
对于左右布局,我遇到了同样的问题:更改侧边栏内容和主要内容,而不重复样式、横幅等。
我发现的最简单的方法是删除嵌套路由,并创建一个布局组件,我在其中通过属性提供不断变化的内容。
布局组件(为这篇文章删除):
export function Layout(props) {
return (
<>
<div class="left-sidebar">
<img id="logo" src={Logo} alt="My logo" />
{props.left}
</div>
<div className='right'>
<header className="App-header">
<h1>This is big text!</h1>
</header>
<nav>
<NavLink to="/a">A</NavLink>
|
<NavLink to="/b">B</NavLink>
</nav>
<main>
{props.right}
</main>
</div>
</>
);
}
在反应路由器中的用法:
<Route path="myPath" element={
<Layout left={<p>I'm left</p>}
right={<p>I'm right</p>} />
} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.