javascript - 从导航栏中的路由获取参数，React-Router

Question

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

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 '../style.scss';

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

export default App;

和我的 NavBar组件设置如下:

import React, { Component } from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';
import '../style.scss';

class NavBar extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    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>
            <NavLink to="/dashboard/:prodID/search">Search</NavLink>
            <NavLink to="/dashboard/:prodID/analyze">Analyze</NavLink>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default withRouter(NavBar);

我有两件事要弄清楚:

我希望能够访问 prodID我的 NavBar 组件中的路由参数，以便当用户单击路由时，它将采用有效的 prodID并正确渲染路线。

我只想显示 NavLink s 在 NavBar如果用户在具有 prodID 的路由上参数。如果他们在回家路线上/例如，链接不会显示。但如果他们在路线上/dashboard/[valid prodID]/search ，链接就会出现。

我该如何实现？我已经看过关于 SO 处理路由参数和导航栏的其他帖子，但没有一个人回答了我的问题。任何帮助表示赞赏。

Answer 1

我相信您必须在每条路线下移动导航栏，以便在路径更改时重新渲染并获取正确的参数。
为了实现它，您可以创建 Layout 组件，该组件将包装您传递的组件并向其添加导航栏:

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

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

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

// 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;

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

// 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;

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