在浏览器的地址栏中输入私人组件的网址时，页面无法加载（React-router v4）

Question

我正在制作一个带身份验证的应用，使用react-router和react-router-redux来处理路由。当我从非私人路线开始时，我的路线会按预期呈现，当我在浏览器的地址栏中直接输入私人路线的网址时，没有任何内容被加载（截图）。我该如何解决这个问题？

PrivateRoute.js

const PrivateRoute = ({userStatus, component: Component, ...rest }) => {

    const stuffToShow = (props) => {
        if(userStatus.authenticated) {
            return <Component {...props}/>;
        }
        return <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
        }}/>
    };

    return <Route exact {...rest} render={stuffToShow}/>

};

export default connectComponent(['userStatus'], PrivateRoute);

routes.js

export function renderRoutes(routes) {
    return routes.map((route, i) => {
        if(route.private) {
            return <PrivateRoute key={i} {...route} />;
        }
        return <Route key={i} {...route}/>;
    })
}

const routes = [
    {
        path: '/',
        exact:true,
        component: Home
    },
    {
        path: '/login',
        exact:true,
        component: Login
    },
    {
        path: '/registration',
        exact:true,
        component: Registration
    },
    {
        path: '/users/:id',
        exact:true,
        component: UserPage,
        private: true
    }, 
    {
        path: '/users',
        exact:true,
        component: Users,
        private: true
    },
    {
        path: '/goodBye',
        exact:true,
        component: Goodbye
    },
    {
        path: '*',
        component: NoMatch
    }
];

根：

    <Provider store={store}>
        <Router history={history}>
            <div>
               <Header />
                <Switch>
                    {renderRoutes(routes)}
                </Switch> 
            </div>
        </Router>
    </Provider>

我如何在快速服务器上呈现html：

        this.app.use('/api/users', userRoute);
        this.app.use('/api/blogPosts', blogPostsRoute);
        this.app.use('*',(req,res) => res.sendFile(path.resolve(__dirname, '..', 'public', 'index.html')));

Answer 1

尝试修改此部分：

const stuffToShow = (props) => {
    if(userStatus.authenticated) {
        return <Component {...props}/>;
    }
    return (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    );
};

<Redirect />是多行，应附加()。这是我对你问题的最好猜测。