Реагировать на перенаправление на URL роутера после клика и показывать страницу по умолчанию

Question

У меня есть Header компонент, как:

class Header extends Component {
  render() {
    return (
      <div>
        <h3><Link to="/:one">One</Link></h3>
        <h3><Link to="/:two">Two</Link></h3>
      </div>
    )
  }
}

export default Header

и в моем App.js:

class App extends Component {
  render() {
    return (
      <div>
        <Header />
      </div>
    )
  }
}
export default App

Мое намерение здесь состоит в том, чтобы показать заголовок все время как navbar..

а у меня роутер вроде:

const routes =  (
  <Route path="/" component={App}>
        <Route path="/:login" component={Login} />
        <Route path="/:one" component={One} />
        <Route path="/:two" component={Two} />
  </Route>
)
export default routes

Здесь, в моем Header когда я нажимаю на One или же Two он должен перенаправить на этой странице.

Также главное, что я хочу, я хочу Header компонент на каждой странице.. Как Navbar..

В моем App.js у меня есть только Header составная часть. Когда я иду в / в браузере должно отображаться Login страница по умолчанию..

Мне нужно руководство, чтобы пройти через это..

Я очень новичок, чтобы реагировать

Заранее спасибо..

Answer 1

1. Дополнение {this.props.children} в вашем App.js как это:

class App extends Component {
  render() {
    return ( 
        <div>
            <Header />
            {this.props.children}
        </div>
    )
  }
}
export default App

и изменить файл маршрутов

const routes =  (
  <Route path="/" component={App}>
        <Route path="/login" component={Login} />
        <Route path="/one" component={One} />
        <Route path="/two" component={Two} />
  </Route>
)
export default routes

показывать заголовок все время как navbar.

2. Простой пример аутентификации

Пример реакции на маршрутизатор