Reactjs 反应路由器：从根路径排除路由

我目前正在为我的React应用程序设置基本身份验证。我有一个

AppWithAuth

类，它包装了普通的应用程序，还有一个登录页面。我的目标是在用户未经身份验证时重定向到

/login

，但允许他们访问任何其他路径（如

/

（仪表板路径），

/users

），等等

我遇到的问题是，应用程序希望呈现根目录，但如果未经过身份验证，将重定向到登录。但是由于登录路径包含在根目录渲染中，应用程序会无休止地重定向。有什么方法可以达到预期的效果吗？以下是我代码的要点：

应用程序：

类应用程序扩展了React.Component{
render（）{
返回(
{/*应用程序的主要路径，例如/用户…*/}
...
)
}
}

AppWithAuth：

class AppWithAuth extends React.Component {
  isAuthenticated = () => {
    // suppose this returns true if user is authenticated, false otherwise
  }

  render() {
    return (
      <Router>
        <Route path='login' component={Login} />
        <Route path='/' render={props => {
          return this.isAuthenticated ? (
            <App />
          ) : (
            <Redirect to='/login' />
          )
        }} />
      </Router>
    )
  }
}

类AppWithAuth扩展了React.Component{
isAuthenticated=（）=>{
//假设如果用户经过身份验证，则返回true，否则返回false
}
render（）{
返回(
{
返回此。是否已验证(
) : (
)
}} />
)
}
}

试试这个怎么样

为经过身份验证的用户制作

ProtectedRoute

导出默认值（{isAuthenticated，component:C，…rest}）=>{
如果（未经验证）{
} />
}否则{
返回
}
}

在App.js中使用路由器、路由

从“./ProtectedRoute”导入ProtectedRoute
类应用程序扩展了React.Component{
isAuthenticated=（）=>{
//假设如果用户经过身份验证，则返回true，否则返回false
}
render（）{
返回(
)
}
}

---

ProtectedRoute

仅对经过身份验证的用户接受任何其他重定向到/login

如果使用

开关

，则可以专门匹配路径。在这种情况下，顺序很重要-要匹配的第一条路径将断开开关，就像

开关

语句一样。如果需要，还可以利用

exact

属性精确匹配路径。例如：

                <Router>
                    <Switch>
                        <Route exact path="/login" component={Login} />
                        <Route
                            path="/"
                            render={props => {
                                return this.isAuthenticated ? (
                                    <App />
                                ) : (
                                    <Redirect to="/login" />
                                );
                            }}
                        />
                        <Route path="/home" component={App} />
                    </Switch>
                </Router>

{
返回此。是否已验证(
) : (
);
}}
/>

export default ({ isAuthenticated, component: C, ...rest }) => {
  if (isAuthenticated) {
    <Route {...rest} render={props => <C {...props} />} />
  } else {
    return <Redirect to="/login" />
  }
}

import ProtectedRoute from './ProtectedRoute'
class App extends React.Component {
  isAuthenticated = () => {
    // suppose this returns true if user is authenticated, false otherwise
  }
  render() {
    return (
      <Router>
        <Route path='login' component={Login} />
        <ProtectedRoute path='/' component={Main} isAuthenticated={this.isAuthenticated()} />
      </Router>
    )
  }
}

                <Router>
                    <Switch>
                        <Route exact path="/login" component={Login} />
                        <Route
                            path="/"
                            render={props => {
                                return this.isAuthenticated ? (
                                    <App />
                                ) : (
                                    <Redirect to="/login" />
                                );
                            }}
                        />
                        <Route path="/home" component={App} />
                    </Switch>
                </Router>