在 react 应用程序中使用 react router v4 的正确方法答案

【问题标题】：Right way to use react router v4 in the react application在 react 应用程序中使用 react router v4 的正确方法
【发布时间】：2019-01-03 07:03:53
【问题描述】：

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

**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 }
        }}
      />
    )
};

这样我就在我的项目中添加了路线。所以，我很困惑天气我是否以正确的方式使用它。有人可以建议我或帮助我吗？

【问题讨论】：

您的应用程序中有两个路由器实例，对于应用程序范围的路由导航，您应该使用单个路由器实例
所以，我不应该使用路由器历史记录 - {history}
看看你上面的实现可能最好删除 BrowserRouter 实例
我这里使用的路由器是 import { Route, Redirect, Router, Switch, BrowserRouter, Provider } from 'react-router-dom';
是的，除了我们讨论的路由器更改之外，您的设置是正确的

标签： javascript reactjs redux react-redux react-router-v4

【解决方案1】：

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

【讨论】：

那么，我该怎么办，我应该删除路由器历史= {history}
在您的 index.js 文件中。您可以简单地删除 BrowserRouter ，一切仍然正常。只需使用：ReactDOM.render(, document.getElementById('root'));
从 'react-router-dom' 导入 { 路由、重定向、路由器、交换机、BrowserRouter、Provider }；这是我正在使用的路由器
对，但是和的作用相同。将一个嵌套在另一个中是完全没有必要的。在您当前的代码中，您将路由器设置在一个组件中，然后将该组件再次包装在 BrowserRouter 中。你不需要两者。
好的，然后我将从我的 app.js 文件中删除该 BrowserRouter

【解决方案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"/>
                )
            }
        />
    )
}

【讨论】：

我认为它与switch case中的路由匹配，因为它没有进入privateRoute。