Javascript 在react应用程序中使用react路由器v4的正确方法

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

**index.js**

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

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"/>
                )
            }
        />
    )
}

**index.js**
ReactDOM.render(
，document.getElementById（'root'）；

App.js

const store = configureStore()

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

 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>
        )
      }
    }

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

const store=configureStore（）
类应用程序扩展了React.Component{
render（）{
返回(
)
}

Main.js

const store = configureStore()

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

 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>
        )
      }
    }

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

import React，{Component}来自'React'；
从“react router dom”导入{Switch，Route}；
从“../../PrivateRoute/component/PrivateRoute”导入PrivateRoute；
常数着陆屏幕=（）=>{
返回(
着陆屏幕已关闭
)
}
常量登录组件=（）=>{
返回(
登录组件
)
}
导出默认类主扩展组件{
render（）{
返回(
)
}
}

在privateRoute.js中

const store = configureStore()

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

 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>
        )
      }
    }

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

const PrivateRoute=（{component:component，isFetching，hasUserLogIn，path，…rest}）=>{
返回localStorage.getItem（“访问令牌”）？
(
)
:
(
)
};

这样我就在我的项目中添加了路线。 所以，我不知道我是否正确使用了它。

---

有谁能建议我或帮助我吗？

你的设置似乎很好！我唯一要注意的是你正在使用

将路由包装到一个文件中。然后用

浏览器路由器将同一路由器嵌套到另一个文件中。这似乎有点重复。
你的设置似乎很好！我唯一要注意的是你正在使用使用
将路由包装到一个文件中。然后使用
BrowserRouter
将同一路由器嵌套到另一个文件中。这似乎有点重复。
关于您的本地存储问题。请尝试这样设置您的PrivateRoute

**index.js**

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

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"/>
                )
            }
        />
    )
}

const privaterote=（{component:component，auth，…rest}）=>{
返回(
localStorage.getItem（“访问令牌”）(
) : (
)
}
/>
)
}
关于您的本地存储问题。试着像这样设置你的私人路线

**index.js**

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

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"/>
                )
            }
        />
    )
}

const privaterote=（{component:component，auth，…rest}）=>{
返回(
localStorage.getItem（“访问令牌”）(
) : (
)
}
/>
)
}
您的应用程序中有两个路由器实例，对于应用程序范围内的路由导航，您应该使用单一路由器实例。因此，我不应该使用路由器历史-{history}查看上面的实现，最好删除BrowserRouter实例。我在这里使用的路由器是导入的{路由，重定向，路由器，交换机，BrowserRouter，Provider}来自'react Router dom'；是的，除了我们讨论的路由器更改之外，您的设置是正确的。您的应用程序中有两个路由器入口，对于应用程序范围的路由导航，您应该使用一个单一路由器实例。因此，我不应该使用路由器历史-{history}查看上面的实现，最好删除BrowserRouter实例我在这里使用的路由器是导入{Route，Redirect，router，Switch，BrowserRouter，Provider}从'react router dom'；是的，除了我们讨论的路由器更改之外，您的设置是正确的。那么，我应该怎么做，我应该删除index.js文件中的路由器历史记录={history}。您只需删除BrowserRouter，一切都可以正常工作。只需使用：react dom.render（，document.getElementById（'root'）；导入{路由、重定向、路由器、交换机、浏览器路由器、提供程序}来自“react router dom”；这是我正在使用的路由器，但用途相同。完全不需要将其中一个嵌套在另一个中。在您当前的代码中，您将路由器设置在一个组件中，然后将该组件重新包装在BrowserRouter中。您不需要两个组件。好的，然后我将删除该BrowserRouter fr从我的app.js文件中，我应该怎么做，我应该删除index.js文件中的路由器历史记录={history}。您只需删除BrowserRouter，一切都可以正常工作。只需使用：ReactDOM.render（，document.getElementById（'root'）；导入{Route，Redirect，router，Switch，BrowserRouter，Provider}来自“react router dom”；这是我正在使用的路由器，但用途相同。完全不需要将其中一个嵌套在另一个中。在您当前的代码中，您将路由器设置在一个组件中，然后将该组件重新包装在BrowserRouter中。您不需要两个组件。好的，然后我将删除该BrowserRouter from my app.js文件我认为它与交换机情况下的路由匹配，登录是因为它不到privateRoute。我认为它与交换机情况下的路由匹配，登录是因为它不到privateRoute。