Question

登录后，您将被带到药剂师的主页。并且在此页面中，有一个与空间相关的仪表板，该仪表板必须根据用户的选择进行更改。当我单击仪表板上的链接时，此路由必须传递给Home组件而不是App组件有没有办法进行这种重定向？

//App.js routing
export default class App extends Component{
  render(){
    return(
      <Router>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/inscription" component={Inscription} />
            <Route path="/connexion" component={Connexion} />
            <Route path="/pharmacie/accueil" component={Accueil} />
            <Route path="*" component={Error} />
          </Switch>
      </Router>
    )
  }
}


//Accueil.js for the pharmacist after login

export default class Accueil extends Component{
  render(){

    return (
       <div>
          <div className="nav-dashboard">
            <DashBoard/>
          </div>
          <div className='corps' >

          /* ANd here I want this component be modifiable*/
              <Route path="/" component={Profile} />

          </div>        
      </div>
    )
  }
}

const DashBoard = props => (
    <div>
        <div className="dash dash-span"><span><i className="fas fa-bars mr-3"></i>Tableau de bord</span></div>

        <Link to="/pharmacie/stats"><i className="fas fa-signal mr-2"></i> Statistiques</Link>

        <Link to="/pharmacie/profile"><span><i className="fas fa-laptop-medical mr-3"></i>Profil</span></Link>
        </div>
)

Answer 1

在黑暗中拍摄一枪，但我想你追的是：

//App.js routing
export default class App extends Component{
  render(){
    return(
      <Router>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/inscription" component={Inscription} />
            <Route path="/connexion" component={Connexion} />
            <Route path="/pharmacie/accueil" component={Accueil}>
            <Route path="*" component={Error} />
          </Switch>
      </Router>
    )
  }
}


//Accueil.js for the pharmacist after login

export default class Accueil extends Component{
  render(){
    const { match } = this.props;

    return (
       <div>
          <div className="nav-dashboard">
            <DashBoard/>
          </div>
          <div className='corps' >    
            <Route
              exact
              path={match.url}
              component={() => <Redirect to={`${match.url}/profile`} />}
            />    
            <Route path={`${match.url}/profile`} component={Profile}/>
          </div>        
      </div>
    )
  }
}

/pharmacie/accueil和/pharmacie/accueil/profile都将在您的Profile组件中呈现。然后，您可以按照以下方案添加更多内容：/pharmacie/accueil/<subroute>

Reactjs：组件之间的嵌套导航？

1 个答案: