带有React Router的React App上的元素静态

时间:2019-04-21 12:49:27

标签: reactjs react-router

我有一个问题,有可能在带有React Router的react app上有一个静态组件,例如,在我的App上有这个

<Router>
      <Switch>
        <Route exact path="/"  render={(routeProps ) => <Home  data={props.data} isPeddingHome={props.isPeddingHome} onGetShows={props.onGetShows}  {...routeProps} />}/>
        <Route path="/movies" render={(routeProps) => <MoviesPage isPeddingMovies={props.isPeddingMovies} movies={props.movies} onGetMovies={props.onGetMovies} {...routeProps} /> }/>
        <Route path="/tvSeries" render={(routeProps) => <TvSeriesPage  isPeddingSeries={props.isPeddingSeries} series={props.series} onGetSeries={props.onGetSeries} {...routeProps}/>}/>
        <Route path="/tv/:id"  render={(routeProps) => <TvDettailsRoute key={routeProps.match.params.id} {...routeProps}/>}/>
        <Route path="/movie/:id"  render={(routeProps) => <MovieDettailsRouter key={routeProps.match.params.id}  {...routeProps}/>}/>
        <Route path="/register" render={(routeProps) => <Register />} />
        <Route path="/login" render={(routeProps) => <Login /> } />
      </Switch>
 </Router>

在我称为标题的每个组件上,都可以有这样的情景吗?

<header>
 <Header />
 <Search />
</header>
<Router>
          <Switch>
            <Route exact path="/"  render={(routeProps ) => <Home  data={props.data} isPeddingHome={props.isPeddingHome} onGetShows={props.onGetShows}  {...routeProps} />}/>
            <Route path="/movies" render={(routeProps) => <MoviesPage isPeddingMovies={props.isPeddingMovies} movies={props.movies} onGetMovies={props.onGetMovies} {...routeProps} /> }/>
            <Route path="/tvSeries" render={(routeProps) => <TvSeriesPage  isPeddingSeries={props.isPeddingSeries} series={props.series} onGetSeries={props.onGetSeries} {...routeProps}/>}/>
            <Route path="/tv/:id"  render={(routeProps) => <TvDettailsRoute key={routeProps.match.params.id} {...routeProps}/>}/>
            <Route path="/movie/:id"  render={(routeProps) => <MovieDettailsRouter key={routeProps.match.params.id}  {...routeProps}/>}/>
            <Route path="/register" render={(routeProps) => <Register />} />
            <Route path="/login" render={(routeProps) => <Login /> } />
          </Switch>
     </Router>

使用路由器仅调用需要更改的组件?

编辑:我希望网站上的标题始终是静态的,然后通过route在路径的基础上加载该组件,所以我不需要为每个组件加载hader

0 个答案:

没有答案