typescript 如何在React 18，React-Router 6中的navbar中获取路由参数

zpjtge22 于 2023-11-20 发布在 TypeScript

关注(0)|答案(2)|浏览(104)

我有一个React前端。代码如下。我的问题是我需要在导航菜单中的<Routes>之外获取路由信息，而我不能使用useParams()。另一方面，我试图将<Routes>移动到<NavMenu>之外，但我得到一个错误：

Error: [default] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

字符串
在React 18之前，我可以使用this.props.location.pathname.split...，但即使这样也是一种解决方案。而且withRouter在react-router-dom@6中不再可用。
代码，非常简单：
index.tsx

ReactDOM.createRoot(document.getElementById('react-hook'))
    .render(
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    );

型
app.tsx

export default () => (
    <Layout>
        <Routes>
            <Route path='/:auxParam/site/foo/:startIndex?' Component={Extra} />
        </Routes>
    </Layout>
);

型
layout.tsx

export default (props: { children?: React.ReactNode }) => (
    <React.Fragment>
        <NavMenu />
        <Container tag="main">
            {props.children}
        </Container>
    </React.Fragment>
);

型
navmenu.tsx

class NavMenu extends React.PureComponent<NavMenuProps, { isOpen: boolean }> {
  public render() {
    const auxParam: string = ...?...; // how to get it?
    return (
      <header>
        <Navbar>
          <Container>
            <NavbarBrand tag={Link} to="/">My site (React)</NavbarBrand>
            <ul>
              <NavItem>
                <NavLink tag={Link} to={`/${aux}/site/foo`}>Extra</NavLink>
              </NavItem>
            </ul>
          </Container>
        </Navbar>
      </header>
    );
  }
}
export default NavMenu;

型

typescript

来源：https://stackoverflow.com/questions/77512374/how-to-get-route-params-in-navbar-in-react-18-react-router-6

2条答案

按热度按时间

6tdlim6h1#

将Layout更新为布局布线组件，例如，它渲染Outlet组件而不是children属性。
范例：
Layout.tsx

import { Outlet } from 'react-router-dom';

export default () => (
  <React.Fragment>
    <NavMenu />
    <Container tag="main">
      <Outlet />
    </Container>
  </React.Fragment>
);

字符串
App.tsx
在element prop上渲染Extra。Component prop仅在数据路由器中有用。

export default () => (
  <Routes>
    <Route element={<Layout />}>
      <Route path='/:auxParam/site/foo/:startIndex?' element={<Extra />} />
    </Route>
  </Routes>
);

型
NavMenu.tsx
将此组件转换为React函数组件，以便它可以使用useParams钩子。

import { Link, useParams } from 'react-router-dom';
...

const NavMenu () => {
  const { auxParam } = useParams();

  return (
    <header>
      <Navbar>
        <Container>
          <NavbarBrand tag={Link} to="/">My site (React)</NavbarBrand>
          <ul>
            <NavItem>
              <NavLink tag={Link} to={`/${aux}/site/foo`}>
                Extra
              </NavLink>
            </NavItem>
          </ul>
        </Container>
      </Navbar>
    </header>
  );
}

export default NavMenu;

型

赞(0）回复(0）举报 2023-11-20

sd2nnvve2#

我不知道我是否理解你的问题，但我想分享这个作为我的答案。

import { useLocation } from 'react-router-dom';
 
...
const location = useLocation();
console.log(location.pathname);
...

字符串
或者我为你准备了另一个解决方案。

import { useLocation } from 'react-router-dom';

class NavMenu extends React.PureComponent<NavMenuProps, { isOpen: boolean }> {
  public render() {
    const location = useLocation();
    const auxParam = location.pathname.split('/')[1]; // Adjust this based on your route structure

    return (
      <header>
        <Navbar>
          <Container>
            <NavbarBrand tag={Link} to="/">My site (React)</NavbarBrand>
            <ul>
              <NavItem>
                <NavLink tag={Link} to={`/${auxParam}/site/foo`}>Extra</NavLink>
              </NavItem>
            </ul>
          </Container>
        </Navbar>
      </header>
    );
  }
}

export default NavMenu;

型

赞(0）回复(0）举报 2023-11-20

我来回答

typescript 如何在React 18，React-Router 6中的navbar中获取路由参数

2条答案

相关问题

热门标签

最新问答