Javascript 从导航栏中的路由获取参数，反应路由器

我在App.js中设置了一个路由器，如下所示：

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Redirect}；
从“/nav bar”导入导航栏；
从“./登录页”导入登录；
从“/Dashboard”导入仪表板；
从“./Analysis”导入分析；
导入“../style.scss”；
常量应用=（道具）=>{
返回(
(
404错误
找不到页面
)}
/>
);
};
导出默认应用程序；

我的

NavBar

组件设置如下：

import React，{Component}来自'React'；
从“react router dom”导入{NavLink，withRouter}；
从'react bootstrap'导入{Navbar，Nav}；
导入“../style.scss”；
类导航栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
我的项目
搜寻
分析
);
}
}
使用路由器导出默认值（导航栏）；

我想弄清楚两件事：

我希望能够在导航栏组件中访问

prodID

route参数，以便当用户单击路由时，它将使用有效的

prodID

并正确呈现路由

我只想在

NavBar

中显示

NavLink

s，前提是用户所在的路线具有

prodID

参数。例如，如果他们在回家路线

/

上，链接就不会显示。但是如果他们在路线

/dashboard/[valid prodID]/search

，链接就会显示出来

---

我如何着手实施这一点？我看过其他关于路线参数和导航条的帖子，但是没有一个能回答我的问题。非常感谢您的帮助。

我相信您必须将导航栏移动到每条路线下，以便在路径更改时重新渲染并获取正确的参数

为了实现此目的，您可以创建布局组件，该组件将包裹您传递的组件并向其添加导航栏：

// Layout.jsx
import React from "react";
import NavBar from './nav-bar';

export const Layout = () => {
  return (
    <div>
      <Navbar />
      <div>{children}</div>
    </div>
  );
};

//Layout.jsx
从“React”导入React；
从“/nav bar”导入导航栏；
导出常量布局=（）=>{
返回(
{儿童}
);
};

然后在应用程序中，您可以使用布局组件将每个组件包装在路由中，如下所示

// App.jsx    
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";
import NavBar from "./nav-bar";
import Landing from "./landing-page";
import Dashboard from "./dashboard";
import Analysis from "./analysis";
import { Layout } from "./Layout";
import "../style.scss";

const App = props => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Layout>
            <Landing />
          </Layout>
        </Route>
        <Route path="/dashboard/:prodID/search">
          <Layout>
            <Dashboard />
          </Layout>
        </Route>
        <Redirect from="/dashboard/:prodID" to="/dashboard/:prodID/search" />
        <Route path="/dashboard/:prodID/analyze">
          <Layout>
            <Analysis />
          </Layout>
        </Route>
        <Route
          component={() => (
            <div id="error">
              <h1>404 ERROR</h1>
              <h2>Page not found</h2>
            </div>
          )}
        />
      </Switch>
    </Router>
  );
};

export default App;

//App.jsx
从“React”导入React；
进口{
BrowserRouter作为路由器，
路线,，
转换
重新使用
}从“反应路由器dom”；
从“/nav bar”导入导航栏；
从“/登录页”导入登录；
从“/Dashboard”导入仪表板；
从“/Analysis”导入分析；
从“/Layout”导入{Layout}；
导入“./style.scss”；
const App=props=>{
返回(
(
404错误
找不到页面
)}
/>
);
};
导出默认应用程序；

这种方法将帮助您实现第二个目标。由于导航栏现在嵌套在每个路由下，因此您可以轻松地从路径获取参数并有条件地呈现链接，如下所示：

// NavBar.jsx
import React from "react";
import { NavLink, useParams } from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
import "../style.scss";

const NavBar = () => {
  const { prodID } = useParams();

  return (
    <Navbar id="nav-bar" bg="dark" variant="dark">
      <Navbar.Brand href="/">My Project</Navbar.Brand>
      <Navbar.Collapse
        id="responsive-navbar-nav"
        className="justify-content-end"
      >
        <Nav>
          {prodID && (
            <NavLink to={`/dashboard/:${prodID}/search`}>Search</NavLink>
          )}
          {prodID && (
            <NavLink to={`/dashboard/:${prodID}/analyze`}>Analyze</NavLink>
          )}
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default NavBar;

//NavBar.jsx
从“React”导入React；
从“react router dom”导入{NavLink，useParams}；
从“react bootstrap”导入{Navbar，Nav}；
导入“./style.scss”；
常量导航栏=（）=>{
const{prodID}=useParams（）；
返回(
我的项目
{prodID&&(
搜寻
)}
{prodID&&(
分析
)}
);
};
导出默认导航栏；

---

我还没有测试过它，但它应该可以帮助您解决问题。

useParamshook只在

Route

中起作用。它在

导航栏

组件中不起作用，该组件位于任何

路由

组件之外

导航栏

位于

布局

组件中，该组件封装了每条路由内的每个组件。应用程序组件中有一个

NavBar

实例，这是一个错误。这是现在删除。谢谢你的这个绝妙的想法！