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将同一路由器嵌套在另一个文件中。这似乎有点重复。

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的正确方法

2 个答案: