如何使用history.push('somePath_fromParentComp')从其子组件命中父组件内指定的路由？

Question

这是我的路线结构

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
    <AuthFBContextProvider>
            <LangContextProvider>
                <BrowserRouter>
                    <App />
                </BrowserRouter>
            </LangContextProvider>
    </AuthFBContextProvider>
);

App.js

return (
        <Switch>
          {/* <Route path='/' exact>
            <Redirect to='/en' />
          </Route> */}
          <Route path='/en'>
            <EnglishRouter />
          </Route>
          <Route path="/fr">
            <FrenchRouter/>
          </Route>
          <Route path='*'>
            <NotFound />
          </Route>
        </Switch>
);

EnglishRouter.js (仅在路径为‘/en’时呈现)，这是我的父组件

<MainNavigation>
        <p>english route</p>
        <Switch>
            <Route path={path} exact>
                <MainPage />  
            </Route>
            <Route path={`${path}/promotions`} exact> -> renders on en/promotions
                <Promotions />
            </Route>
            **<Route path={`${path}/auth`}> -> renders on en/auth
                <AuthPage />
            </Route>**
        </Switch>
    </MainNavigation>)

AuthPage.js (在‘en/auth’上呈现)是子组件

    <Router>
      <Switch>
        <Route path={`${path}/signup`} component={Signup} exact/>
        <Route path={`${path}/login`} component={Login} exact/>
        <Route path={`${path}/forgot-password`} component={ForgotPassword} exact/>
      </Switch>
    </Router>

Login.js

const Login = () => {
    const authFBCtx = useContext(AuthFBContext);
    const { path, url } = useRouteMatch()
    const history = useHistory();

    const submitHandler = (event) => {
        event.preventDefault();
    
        const enteredEmail = emailInputRef.current.value;
        const enteredPassword = passwordInputRef.current.value;
        authFBCtx.login(enteredEmail, enteredPassword);
        **history.push('en/promotions')**
      }

    return(...<form onSubmit{submitHandler}><form>)

现在的问题是

如果我在从history.push登录后执行Login.js (en/促销或任何其他链接)，它将更改为正确的url(‘en/促销’)，但Promotion.js不会加载。

现在，我可以手动地将AuthPage.js中的其他路由放在旁边，以捕获路由，然后加载Promotions.js，这将在嵌套时呈现升级。

AuthPage.js更新

 <Route path='/en/promotions' component={Promotions} exact/>
 <Route path={`${path}/login`} component={Login} exact/>
 <Route path={`${path}/signup`} component={Signup} exact/>

，但是active compoent/path仍然发生在AuthPage.js内部，而不是来自父组件，即EnglishRouter.js

我导航的NavLink显示活动路径/路由是'/en/auth‘，甚至在之后

history.push('en/promotions')

​

​

我希望历史记录(‘en/ LoginPage.js’)从内部LoginPage.js中访问位于EnglishRouter.js中的父路由，以便父组件上的活动路由。

我该怎么做？？

不管我做什么，都发生在我的孩子身上.我不知道我是否说得很清楚.

Answer 1

问题是在Login.js中，我在App.js中放置了另一个路由器

<Router>
      <Switch>
        <Route path={`${path}/signup`} component={Signup} exact/>
        <Route path={`${path}/login`} component={Login} exact/>
        <Route path={`${path}/forgot-password`} component={ForgotPassword} exact/>
      </Switch>
</Router>

这就是为什么每当我使用历史记录(/en/促销)时，活动路径无法查看此路由器之外的位置，而是查看Login.js中指定的路由.

我花了12个小时为自己感到难过.