为什么子组件应该使用路由器作为其父组件进行包装 [英] Why child component should be wrapped with Router as its parent component

问题描述

我想知道为什么我的父App组件用<Router history={history}>包装
那么它的子组件Signup应该像这样重新包装吗？
当Signup组件没有<Router history={history}>时，它将不显示任何内容-空页。
这里的意义在哪里？

Index.js

ReactDOM.render(
  <StrictMode>
    <Router history={history}>
      <App />
    </Router>
  </StrictMode>,
  document.getElementById('root')
);

App.js

return (
    <div className='App-div'>
      <Route>
        {signUpFirst ? <Redirect to='/signup' /> : <Redirect to='/home' />}
        <Switch>
          <Route exact path='/signup'>
            <SignUp homePage={exitSignUpPage} setUserNumber={setUserID} />
          </Route>
          <Route exact path='/home'>
            <Home userIDNumber={userID} />
          </Route>
        </Switch>
      </Route>
    </div>
  );

SignUp.js

 render() {
    return (
      <div className='signUp-div'>
        <Header />
       <Router history={history}>  // Without nothing will be shown on screen
        <div className='form-div'>
          <Redirect to='/signup/mobile' />
          <Switch>
            <Route exact path='/signup/mobile' component={MobileNum} />
            <Route exact path='/signup/idnumber'>
              <IdentNumber setPersonalID={this.props.setUserNumber} />
            </Route>
            <Route exact path='/signup/password'>
              <CreatePass />
            </Route>
          </Switch>
        </div>
         </Router> 
      </div>
    );

对于了解这一点的人来说，这将是愚蠢的。

推荐答案

1. App.js

import  routes  from "./Route.js";
    function App() {
      return (
        <div>
          <Router>
            <Switch>
              {routes.map((prop, key) => {
                return (
                  <Route path={prop.path} key={key} component={prop.component} />
                );
              })}
              <Route path="/" component={Home} />
            </Switch>
          </Router>
        </div>
      );
    }

2. Route.js

import SignUp from "../components/SignUp";
import Home from "../components/Home";
     var routes = [
      {
        path: "/signup",
        name: "SignUp",
        component: SignUp,
      },
      {
        path: "/home",
        name: "HOME",
        component: Home,
      }
    }
    export default routes;

3. 遵循此模式，则无需反复写入路由器

这篇关于为什么子组件应该使用路由器作为其父组件进行包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！