Javascript 带有React路由器的React中间件身份验证组件

我有这个app.js。我试着做一个Auth组件，不管它是否只是作为一个中间件来检查用户是否已经登录

const App = props => (
    <BrowserRouter>
        <Provider store={store}>
            <div className="app">
                <Layout>
                <Header>
                    <Navbar />
                </Header>
                <Content>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/login' component={Login} />
                    <Route exact path='/signup' component={Signup} />
                    <Auth>
                        <Route exact path='/task/:id' component={Task} />
                    </Auth>
                </Content>
                </Layout>
            </div>
        </Provider>
    </BrowserRouter>
)

const-App=props=>(
)

但奇怪的是，当我访问登录和注册路径时，它会触发

我的auth.js看起来像这样

import React, { Component } from 'react';

export default class auth extends Component {

    constructor(props) {
        super(props)

        const user = localStorage.getItem('user')
        if(!user) {
            window.location = '/login'
        }
    }

    render() {
        return (
            <div></div>
        );
    }
}

import React，{Component}来自'React'；
导出默认类auth扩展组件{
建造师（道具）{
超级（道具）
const user=localStorage.getItem（'user'）
如果（！用户）{
window.location='/login'
}
}
render（）{
返回(
);
}
}

但奇怪的是，当我访问登录和注册路径时，它会触发

问题在于这个

<Auth>
  <Route exact path='/task/:id' component={Task} />
</Auth>

现在，只有当您的确切任务路径匹配时，才会调用

Auth

组件

在

Auth

组件内部处理路由组件的渲染

<Route exact path='/task/:id' component={Auth(Task)} />

但奇怪的是，当我访问登录和注册路径时，它会触发

问题在于这个

<Auth>
  <Route exact path='/task/:id' component={Task} />
</Auth>

现在，只有当您的确切任务路径匹配时，才会调用

Auth

组件

---

在

Auth

组件内部处理路由组件的呈现。

你在使用redux吗？中间件在哪里？@RIYAJKHAN它与redux无关。这个

const user=localStorage.getItem（'user'）

的日志是什么？这取决于我的localStorage是否有用户对象，这无关紧要，问题是当我访问localhost:3000/登录或localhost:3000/注册时，auth组件仍然会触发，这就是问题所在。你在使用redux吗？中间件在哪里？@RIYAJKHAN它与redux无关。这个

const user=localStorage.getItem（'user'）

？它取决于我的localStorage是否有user对象，没关系，问题是当我访问localhost:3000/login或localhost:3000/signup时，auth组件仍然会触发，这就是问题所在。

<Route exact path='/task/:id' component={Auth(Task)} />