Javascript 未使用React路由器的重定向安装组件

尽管我可以走这条路线，但与/Login路线相关联的登录组件并没有挂载。我在下面添加了总共5个组件（App、Login、Auth、Layout3、TopBar）的代码。对于Auth组件，我使用'react-token'Auth'包。请让我知道如果你有任何问题，代码可能看起来很多。但是您可以关注TopBar组件的代码，因为这就是我重定向到登录路径的地方。当然，在应用程序组件中，我添加了登录路径。因此，TopBar和应用程序组件可能存在问题

这里是我为我的应用程序定义了所有路由的应用程序组件

  class App extends Component {
  render() {
  <StylesProvider injectFirst>
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path='/login' component={Login} />
          <Route exact path='/' component={Layout3} />
        </Switch>
      </BrowserRouter>
    </div>
  </StylesProvider>
  }

这里是Layout3组件，我有条件地选择Layout3组件或登录组件

   class Layout3 extends Component {

state = {
    authMessage: '',
    loginStatus: false
}

componentDidMount() {
    authFetch("/api/protected").then(response => {
        console.log('response inside authenticationFetch: ', response)
        if (response.status === 401) {
            this.setState({ authMessage: response.status })
            return null
        }
        return response.json()
    }).then(response => {
        if (response && response.message) {
            this.setState({ authMessage: response.message })
        }
    })
}

  render() {

    return (
        <>
            {
                this.state.authMessage === 401 ?
                    <>
                        <BrowserRouter>
                            <Redirect to='/login' />
                        </BrowserRouter>
                    </>
                    :
                    <>
                        <BrowserRouter>
                            <Switch>
                                <Route exact path='/'>
                                <TopBar/>
                            </Switch>
                        </BrowserRouter>
                    </>
                  }
               </>...

类布局3扩展组件{
状态={
authMessage:“”，
loginStatus:false
}
componentDidMount（）{
authFetch（“/api/protected”）。然后（响应=>{
console.log（'authenticationFetch内的响应：'，响应）
如果（response.status==401）{
this.setState（{authMessage:response.status}）
返回空
}
返回response.json（）
})。然后（响应=>{
if（response&&response.message）{
this.setState（{authMessage:response.message}）
}
})
}
render（）{
返回(
{
this.state.authMessage===401？
:
}
...

最后，这里是显示注销按钮的顶栏

 class TopBar extends Component {
     state = {
        loggedOut: false
      }

 dashboardLogOut = () => {
    this.setState({ loggedOut: true });
 }

  render() {

    console.log('state inside topbar ', this.state.loggedOut)
    if (this.state.loggedOut === true) {
        logout()
        return (
            <Redirect from="/" to="/login" push={true} />
        )
    }
    return(
       <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <button onClick={this.dashboardLogOut}>
                            <i class="fa fa-sign-out"></i> Log out
                        </button>
                    </li>
                </ul>
      );
   }
   }
 

class TopBar扩展组件{
状态={
loggedOut:错
}
仪表板注销=（）=>{
this.setState（{loggedOut:true}）；
}
render（）{
console.log（'state in topbar'，this.state.loggedOut）
if（this.state.loggedOut==true）{
注销（）
返回(
)
}
返回(


注销


);
}
}

您不能像这样导出

导出常量[useAuth、authFetch、login、logout]

它必须是已定义的变量

import { createAuthProvider } from "react-token-auth";

export const useAuthProvider = createAuthProvider({
  accessTokenKey: "access_token",
  onUpdateToken: (token) =>
    fetch("/api/refresh", {
      method: "POST",
      body: token.access_token
    }).then((r) => r.json())
});

稍后，您可以在

Login.js

const [useAuth, authFetch, login, logout] = useAuthProvider();
const [logged] = useAuth();

---

另外，

Layout3

看起来不太好，因为它违反了单一责任原则。基于条件的重定向必须在路由器级别实施

如果有人有任何问题，请告诉我。我遵循的npm包中就是这样做的。“同样，Layout3看起来也不好，因为它打破了单一责任原则。基于条件的重定向必须在路由器级别上实现“-您能详细介绍一下我如何添加基于条件的重定向吗？我对这方面很陌生。类似于这样。这里发生的事情是，您检查您是否有权访问路由级别上的某个端点，而不是组件级别上的某个端点

import { createAuthProvider } from "react-token-auth";

export const useAuthProvider = createAuthProvider({
  accessTokenKey: "access_token",
  onUpdateToken: (token) =>
    fetch("/api/refresh", {
      method: "POST",
      body: token.access_token
    }).then((r) => r.json())
});

const [useAuth, authFetch, login, logout] = useAuthProvider();
const [logged] = useAuth();