React 라우터 글로벌헤더

React 라우터 글로벌헤더

이제 막 React를 배우기 시작했는데, SPA 블로그를 만들려고 합니다. SPA 블로그에는 글로벌하게 고정된 헤더가 있습니다.

import React from 'react';
import { render } from 'react-dom';
// import other components here

    render((
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/About" component={About} />
        <Route path="/Contact" component={Contact} />
        <Route path="*" component={Error} />
      </Router>
    ), document.getElementById('app'));

따라서 각 루트의 헤더는 동일하며 각도가 있는 배경에서는 ui 뷰 이외의 헤더를 사용합니다.

각 페이지 컴포넌트에 헤더 컴포넌트를 Import하는 것이 좋습니다.또는 헤더 컴포넌트를 추가할 수 있습니까?<Router><myHeader/><otherRoutes/></Router>?

업데이트:

이런 걸 써볼까 했는데

루트 컴포넌트: 루트를 정의합니다.

class Routes extends React.Component {
    render() {
        return (
            <Router history={browserHistory}>
                <IndexRoute component={Home} />
                <Route path="/studio" component={Studio} />
                <Route path="/work" component={Work} />
                <Route path="*" component={Home} />
            </Router>
        )
    }
}

다음으로 메인 Index.js 파일에 다음과 같은 내용을 렌더링합니다.

import Routes from './components/Routes';

render((
   <div>
      <div className="header">header</div>
      <Routes />
   </div>
), document.getElementById('app'));

누가 설명 좀 해줄래?감사합니다!

제 경험상 페이지 레이아웃 컴포넌트를 정의하는 것이 좋을 수 있습니다.예를 들어 다음과 같습니다.

레이아웃 컴포넌트

render() {
    return(
       <div>
          <Header />
             { this.props.children }
             /* anything else you want to appear on every page that uses this layout */
          <Footer />
       </div>
    );
}

그런 다음 레이아웃을 각 페이지 구성요소로 가져옵니다.

연락처 페이지 컴포넌트

render() {
    return (
        <Layout>
           <ContactComponent />
           /* put all you want on this page within the layout component */
        </Layout>
    );
}

또한 루팅을 그대로 둘 수 있습니다.루트는 연락처 페이지를 렌더링하고 다음으로 헤더를 렌더링합니다.

이렇게 하면 여러 페이지에 걸쳐 반복되는 내용을 제어할 수 있습니다.조금 다른 페이지가 필요한 경우 다른 레이아웃을 작성하여 사용할 수 있습니다.

다음과 같은 방법이 도움이 됩니다.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from "./components/Header";
import Home from "./components/Home";
import Dashboard from "./components/Dashboard";
import Footer from "./components/Footer";
class App extends Component {
  constructor() {
    super();
    this.state = {
      stuff: stuff;
    };
  }
render() {
 let { stuff } = this.state;
 return (
  <Router> //wrapper for your router, given alias from BrowserRouter
   <div className="App">
    <Header /> //this component will always be visible because it is outside of a specific Route
    <Route exact path="/" component={Home}/>  //at the root path, show this component
    <Route path="/dashboard" component={()=><Dashboard stuff={stuff} />}/>  //at the path '/dashboard', show this other component
    <Footer /> //this is also permanently mounted
   </div>
  </Router>
 );
 }
}
export default App;

공로 : David Ker

그 질문은 이미 답변이 되었지만, 저는 다른 접근법을 보여드리고 제가 왜 그것을 선호하는지 말하려고 합니다.

레이아웃 컴포넌트가 있는 것도 좋다고 생각합니다.

function Layout (props) {
  return (
    <div>
      <Header/>
      <div className="content">
        {props.children}
      </div>
    </div>
  );
}

단, 각 루트컴포넌트에 렌더링하는 것이 아니라 루트의 부모로서1번만 렌더링 할 수 있습니다.

return (
  <Router>
    <Layout>
      <Switch>
        <Route path="/about">
          <About/>
        </Route>
        <Route path="/contact">
          <Contact/>
        </Route>
        <Route path="/">
          <Home/>
        </Route>
      </Switch>
    </Layout>
  </Router>
);

대부분의 경우 레이아웃에 시간을 낭비하지 않고 레이아웃이 다른 경우 레이아웃 구성 요소 내에서만 작업하면 되므로 좋습니다.

라우팅 내 헤더를 강제로 새로 고칩니다.forceRefresh={true} 사용

const Routing = () => {
        return(
            <BrowserRouter forceRefresh={true}>
            <Header/>
            <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/list/:id" component={ListingApi}/>
                    <Route path="/details/:id" component={HotelDetails}/>
                    <Route path="/booking/:hotel_name" component={PlaceBooking}/>
                    <Route path="/viewBooking" component={ViewBooking}/>
                    <Route exact path="/login" component={LoginComponent}/>
                    <Route  path="/signup" component={RegisterComponent}/>
            </Switch>
            <Footer/>
            </BrowserRouter>
        )
    }

루팅을 이렇게 하는 다른 솔루션이 있습니다.

const Routing = () => {
        return(
            <BrowserRouter forceRefresh={true}>
            <Header/>
            <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/list/:id" component={ListingApi}/>
                    <Route path="/details/:id" component={HotelDetails}/>
                    <Route path="/booking/:hotel_name" component={PlaceBooking}/>
                    <Route path="/viewBooking" component={ViewBooking}/>
                    <Route exact path="/login" component={LoginComponent}/>
                    <Route  path="/signup" component={RegisterComponent}/>
            </Switch>
            <Footer/>
            </BrowserRouter>
        )
    }

헤더 파일에서 다음과 같이 편집합니다.

import React, {useLocation} from "react";

const header = () => {
    const location = useLocation();
    return(
        <div className={location.pathname === 'login' ? 'd-none': 'd-block'}>
            abc
        </div>
    )

}
export default header;

로그인 페이지에서 헤더 패널을 숨깁니다.

언급URL : https://stackoverflow.com/questions/36262360/react-router-global-header