رد فعل توجيه توجيه تداخل الإصدار 4

1

لدي حالة التالية:

<Wrapper>
   <Container>
      <Route exact path="/" component={UserListing} />
      <Route path="/user/:id" component={UserDetails} />
      <Route exact path="(/|/user/\d+)" component={StaticComponent} />
   </Container>

   <Route path="/create-account" component={CreateAccount}/>
</Wrapper>

حسنًا ، قضيتي بسيطة: لا أريد Container مكون لتقديم إذا كان المسار لا يساوي "/" أو "/user/:id" . حتى إذا كان المسار "/create-account" فقط Wrapper مع CreateAccount كما يجب أن يظهر الطفل ، بدون Container .

أبحث عن بعض المساعدة. شكرا لكم

1 إجابة

1
افضل جواب

يمكنك كتابة مكون مخصص يقرر ما إذا كان سيتم تقديم الحاوية مثل أم لا

const RouterRenderer = ({ location, children }) => {
    if(location && location.state && location.state.noMatch) {
        return null;
    }
    return children;
}

ومكون فرعي يخبر هذه الحاوية أن لا شيء يضاهيها

const NoMatch = () => {
    return <Redirect to={{state: {noMatch: true}}} />
}
export default withRouter(NoMatch);

الآن يمكنك استخدامها مثل

<Wrapper>
   <RouterRenderer>
       <Container>
          <Switch>
              <Route exact path="/" component={UserListing} />
              <Route path="/user/:id" component={UserDetails} />
              <Route exact path="(/|/user/\d+)" component={StaticComponent} />
              <NoMatch />
          </Switch>
       </Container>
   </RouterRenderer>
   <Route path="/create-account" component={CreateAccount}/>
</Wrapper>

P.S. Note that its important to use Switch when you are using NoMatch component since you want to render it only when no other route matched. Also you can write RouteRenderer function in the form of an HOC instead of a functional component.

:مؤلف
فوق
قائمة طعام