使用反应路由器实现中间件auth组件

Question

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

@(new HtmlString(item.MyData))

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

我的auth.js看起来像这样

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

Answer 1

  

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

问题出在这个问题上。

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

默认情况下，您的Auth组件被调用，因为没有包裹Route且没有指定条件进行渲染。

正确的方法。

您应该使用更高阶的组件。

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

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

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