反应路由器条件
React router conditional
我有多个路由器 我在 index.js
中导入 Nav
组件 我只需要为 About
显示 Nav
但我不想显示 Nav
Topics
的组件。我不想在 Home
和 About
中导入 Nav
组件,因为我可以有很多路由器
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<Nav />
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
你也可以看看完整的code in codesandbox
您可以创建一个 HOC 布局,它可以使用额外的道具 noNav 来隐藏您的导航:
组件布局:
import React from "react";
import { Link } from "react-router-dom";
import Nav from "../components/Nav/Nav";
const Layout = ({ children, noNav }) => (
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
{noNav ? null : <Nav />}
<hr />
{children}
</div>
);
export default Layout;
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";
import Topics from "./components/Topics";
import Layout from "./hoc/Layout";
const BasicExample = () => (
<Router>
<div>
<Route
exact
path="/"
render={() => (
<Layout>
<Home />
</Layout>
)}
/>
<Route
path="/about"
render={() => (
<Layout>
<About />
</Layout>
)}
/>
<Route
path="/topics"
render={(props) => (
<Layout noNav>
<Topics {...props} />
</Layout>
)}
/>
</div>
</Router>
);
render(<BasicExample />, document.getElementById("root"));
演示:https://codesandbox.io/s/react-router-forked-k1ve2?file=/index.js:0-874
您可以使用 windows.location.pathname 来识别正确的路径,然后如果您的路径与“/”完全匹配,那么 Nav 组件将被渲染,否则它不会't.It 可以使用三元运算符
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
{window.location.pathname === "/" ? <Nav /> :""}
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
我有多个路由器 我在 index.js
中导入 Nav
组件 我只需要为 About
显示 Nav
但我不想显示 Nav
Topics
的组件。我不想在 Home
和 About
中导入 Nav
组件,因为我可以有很多路由器
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<Nav />
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
你也可以看看完整的code in codesandbox
您可以创建一个 HOC 布局,它可以使用额外的道具 noNav 来隐藏您的导航:
组件布局:
import React from "react";
import { Link } from "react-router-dom";
import Nav from "../components/Nav/Nav";
const Layout = ({ children, noNav }) => (
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
{noNav ? null : <Nav />}
<hr />
{children}
</div>
);
export default Layout;
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";
import Topics from "./components/Topics";
import Layout from "./hoc/Layout";
const BasicExample = () => (
<Router>
<div>
<Route
exact
path="/"
render={() => (
<Layout>
<Home />
</Layout>
)}
/>
<Route
path="/about"
render={() => (
<Layout>
<About />
</Layout>
)}
/>
<Route
path="/topics"
render={(props) => (
<Layout noNav>
<Topics {...props} />
</Layout>
)}
/>
</div>
</Router>
);
render(<BasicExample />, document.getElementById("root"));
演示:https://codesandbox.io/s/react-router-forked-k1ve2?file=/index.js:0-874
您可以使用 windows.location.pathname 来识别正确的路径,然后如果您的路径与“/”完全匹配,那么 Nav 组件将被渲染,否则它不会't.It 可以使用三元运算符
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
{window.location.pathname === "/" ? <Nav /> :""}
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);