在 React 应用程序中使用 React Router v4 的正确方法

Question

我是 React JS 的新手。我已经阅读了很多使用 react router 的教程。所以，我的使用方式是这样的

**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

你的设置看起来不错！我唯一要注意的是您正在使用 <Router> 将您的路线包装在一个文件中。然后使用 BrowserRouter 将同一个 Router 嵌套在另一个文件中。这似乎有点重复。

Answer 2

关于您的 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"/>
                )
            }
        />
    )
}

在 React 应用程序中使用 React Router v4 的正确方法

Right way to use react router v4 in the react application

javascript

reactjs

redux

react-redux

react-router-v4