React Router 不渲染组件答案

【问题标题】：React Router does not render ComponentReact Router 不渲染组件
【发布时间】：2018-09-20 05:13:05
【问题描述】：

我想创建一个带有登录名的 React 应用程序。为了维护用户状态，我想使用 React 16.3 引入的Context API。在实现登录路由时，我遵循了example in React Router documentation。

下面的源代码（如我所愿）是我的问题的一个非常简化的最小示例。当我在浏览器中打开localhost:3000/protected 时，URL 正确更改为localhost:3000/login，但未显示该组件。 render() 方法似乎没有被调用。

如何说服 React 呈现我的登录组件？

这是我的源代码。

App.js

import React, {Component} from 'react';
import {
    BrowserRouter as Router,
    Route
} from 'react-router-dom'
import Login from "./Login";
import Protected from "./Protected";
import ProtectedRoute from "./ProtectedRoute";
import UserContext from "./UserContext";

export default class App extends Component {
    render() {
        return (
            <Router>
                <UserContext.Provider value={false}>
                    <div>
                        <ProtectedRoute path='/protected' component={Protected}/>
                        <Route path='/login' component={Login}/>
                    </div>
                </UserContext.Provider>
            </Router>
        );
    }
}

Login.js

import React from 'react';

export default class Login extends React.Component {
    render() {
        return <p>Login</p>;
    }
}

UserContext.js

import React from "react";
const UserContext = React.createContext();
export default UserContext;

ProtectedRoute.js

import React from 'react'
import {Redirect, Route} from "react-router-dom";
import UserContext from './UserContext';

const ProtectedRoute = ({component: Component, ...rest}) => (
    <Route {...rest} render={props =>
        <UserContext.Consumer>
            {loggedIn =>
                loggedIn === true
                    ? <Component {...props} />
                    : <Redirect to={{
                        pathname: '/login',
                        state: {from: props.location}
                    }}/>
            }
        </UserContext.Consumer>
    }
    />
);

export default ProtectedRoute;

Protected.js

import React from 'react';

export default class Protected extends React.Component {
    render () {
        return <h2>protected</h2>;
    }
}

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

看起来这是一个错误：https://github.com/ReactTraining/react-router/issues/6072，甚至可能是一个 React 错误：https://github.com/facebook/react/issues/12551。

现在，您可以通过在单独的组件中呈现 Router 和上下文提供程序来解决它。比如这样：

const Routes = () => (
  <UserContext.Provider value={false}>
      <div>
          <ProtectedRoute path='/protected' component={Protected}/>
          <Route path='/login' component={Login}/>
      </div>
  </UserContext.Provider>
);

export default class App extends Component {
    render() {
        return (
            <Router>
              <Routes/>
            </Router>
        );
    }
}

【讨论】：