React-router-dom навигация по страницам

Question

Пример простой навигации с react-router-dom. Мне удалось заставить его работать с this.props.history.push('/pathName'); Однако я сомневаюсь в моем понимании и реализации, благодарю вас за 2 цента за исправление моих ошибок.

Я в правильном направлении?

Мой сценарий использования:

Во-первых, у меня 3 страницы с общим компонентом <Navbar> реализовано в верхней части каждой страницы. Navbar состоит из 2 кнопок Страница A и Страница B. При нажатии соответствующей кнопки пользователь должен перейти на любой экран.

1. Домашняя страница
2. Страница A
3. Страница B

Моя реализация:

Домашняя страница. js - (Кроме того, имя класса отличается, и страница A, и B имеют одинаковую реализацию )

import React from 'react';
import { Redirect } from "react-router-dom";

import Navbar from '../common/navbar';

class Homepage extends React.Component{  

 callBackFromNavBar = (value) => {
    NavigationHelper.historyPush(this.props, value);
  }

  render(){

    return (
      <div>
          <Navbar callback={this.callBackFromNavBar}/>
      </div>
    );
  }
}

export default Homepage;

NavigationHelper. js

export const historyPush = (props,value) => {
    console.log('helper calling');
    switch(value){
        case 'PageA':
            props.history.push('/PageA');
            break;
        case 'PageB':
            props.history.push('/PageB');
            break;
        default:
            break;
    }
}

Navbar - ниже показано, как значение передается обратно к родителю

<Button variant="contained" onClick={ () => {
            props.callback('PageA');
          } }>Page A</Button>

Источник обучения:

1. https://dev.to/projectescape/programmatic-navigation-in-react-3p1l

Ссылка на песочницу

https://codesandbox.io/embed/react-router-dom-navigation-4tpzs?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Я бы попробовал что-то вроде этого, чтобы упростить вещи

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import PageA from './'
import PageB from './'

function App() {
  return (
   <Router>
     <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/pageA" component={PageA} />
          <Route exact path="/pageB" component={PageB} />
        </Switch>
    </Router>
  );
}

А затем в вашем компоненте Navbar просто установите <Link> для каждой из этих страниц, здесь я настроил маршруты в приложении. js файл, однако я видел, что люди просто используют выделенный компонент для маршрутизации, но находят то, что лучше всего подходит для вас