URL React Js / Router 中的重复参数

Question

我正在尝试构建一个多语言 React 网站，我一直在努力，直到我终于准备好结构，现在我面临一个问题，我认为是由于我对 React Routes 的误解。

我有一个 MainLayout 布局，它提供 Header / Main 和包含链接的页脚。使用图像很容易描述。

主页导航

分类页面导航

当我再次点击类别页面上的电源时

http://localhost:3000/en/category/power/category/power

App.js

const base = '/:lang([de|en|fr]{2})';
const fallback = '/en';
export const App = ({ store, history }) => {
return(
    <Suspense fallback={<p>...Loading</p>}>
        <I18nextProvider i18n={i18n}>
            <Provider store={store}>
                <ApolloProvider client={client}>
                    <ConnectedRouter history={history}>
                        <Switch>
                            <Route path={base} component={BaseRoutes} />
                            <Redirect to={fallback} />
                        </Switch>
                    </ConnectedRouter>
                </ApolloProvider>
            </Provider>
        </I18nextProvider>
    </Suspense>
)}

Routes.js

const BaseRoutes = ({match}) => {
return (
    <Switch>
        <Route exact path={`${match.url}/`} component={Home} />
        <Route exact path={`${match.url}/:page`} component={Dynamic}/>
        <Route exact path={`${match.url}/category/:category`} component={Category}/>
        <Route exact path={`${match.url}/detail/:url`} component={DetailArticle}/>
    </Switch>
   );
  };
export default withRouter(BaseRoutes);

主要布局

const MainLayout = (props) => {
return (
    <>
        <Header/>
        <main>
            {props.children}
        </main>
        <Footer/>
    </>
 );
};

导航Link在header

<Nav>
      <Nav.Link to={`${match.url}`} as={Link} >{t('home')}</Nav.Link>
      {data.allCategories.map(item => (
       <Nav.Link to={`${match.url}/category/${item.url}`} as={Link}>
            {item.name}
       </Nav.Link>
        ))}
</Nav>

我应该在每个组件中测试匹配 URL 吗？或者还有其他方法吗？我正在使用最新版本的 React / React Router

感谢任何提示或帮助！

Livd 演示：https://codesandbox.io/s/react-nav-bug-5o2fyx

Answer 1

问题在于如何制作 Nav.Link 的“to”参数：

<Nav.Link to={`${match.url}/category/${item.url}`} as={Link}>
  {item.name}
</Nav.Link>

match.url 是你当前的 url，然后你将它与 /category/${item.url} 连接起来，所以它很可能会重复，因为你总是使用前一个 url.

一个可能的解决方案是使用您指定的 lang 参数：

<Nav.Link
  to={`/${match.params.lang}/category/${item.url}`}
  as={Link}
>
  {item.name}
</Nav.Link>

URL React Js / Router 中的重复参数

Duplicate Parameter in URL React Js / Router

reactjs

react-router-dom

connected-react-router