我有一个问题,有可能在带有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