Правильный способ использования реактивного маршрутизатора v4 в приложении «Реакция»

Question

Я новичок в реакции JS. Я прошел много уроков по использованию реагирующего маршрутизатора. Итак, способ, которым я пользуюсь, выглядит следующим образом

**index.js**

ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>, document.getElementById('root'));

App.js

const store = configureStore()

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <Main />
        </div>
      </Provider>
    )
  }

Main.js

 import React, { Component } from 'react';
    import { Switch, Route } from 'react-router-dom';
    import PrivateRoute from '../../privateRoute/component/PrivateRoute';

    const LandingScreen = () => {
  return (
    <div>LandingScreen  is theere</div>
  )
}

    const LoginComponent = () => {
      return (
        <div>LoginComponent</div>
      )
    }

    export default class Main extends Component {
      render() {
        return (
          <Router history={history}>
            <Switch>
              <PrivateRoute exact path="/" component={LandingScreen} />
              <Route exact path="/login" component={LoginComponent} />
            </Switch>
          </Router>
        )
      }
    }

В privateRoute.js

const PrivateRoute = ({ component: Component, isFetching, hasUserLogIn, path, ...rest }) => {
  return localStorage.getItem("access_token") ?
    (
      <Route
        {...rest}
        path={path}
        component={Component}
      />
    )
    :
    (
      <Redirect
        to={{
          pathname: "/login",
          state: { from: path }
        }}
      />
    )
};

Таким образом, я добавил маршруты в свой проект. Итак, я в замешательстве, я использую это правильно или нет. Может кто-нибудь предложить мне или помочь мне с этим?

Answer 1

Относительно вашей проблемы с LocalStorage. Попробуйте настроить свой PrivateRoute следующим образом

const PrivateRoute = ({ component: Component, auth, ...rest}) => {
    return(
        <Route 
            {...rest}
            //route has a render prop that lets you create a component in-line with the route
            render = {props =>
                localStorage.getItem("access_token") ? (
                    <Component {...props} />
                ) : (
                    <Redirect to="/login"/>
                )
            }
        />
    )
}

Answer 2

Ваша установка кажется хорошей! Единственное, что я хотел бы отметить, это то, что вы используете <Router>, чтобы обернуть ваши маршруты в один файл. Затем вложите тот же маршрутизатор в другой файл с BrowserRouter. Это кажется немного дублирующим.