反應與巴貝爾路由器v4給多個路由錯誤

我試圖使react-router v4（「react-router」：「^ 4.0.0-2」）在我的項目中工作，並試圖實施它基於。然而，我無法使它適用於多條路線。我不斷收到：反應與巴貝爾路由器v4給多個路由錯誤

invariant.js:38 Uncaught Invariant Violation: MatchProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我的代碼如下

class Router extends Component { 
    render() { 
    let returnVal = (<BrowserRouter> 
     <Match pattern="/" component={FrontPage} /> 
     <Match pattern="/home" component={Home} /> 
    </BrowserRouter>); 
    return returnVal; 
    } 
} 

export default Router;

由的WebPack產生和巴貝爾如下所示

var Router = function (_Component) { 
    _inherits(Router, _Component); 

    function Router() { 
    _classCallCheck(this, Router); 

    return _possibleConstructorReturn(this, (Router.__proto__ || Object.getPrototypeOf(Router)).apply(this, arguments)); 
    } 

    _createClass(Router, [{ 
    key: 'render', 
    value: function render() { 
     var returnVal = _react2.default.createElement(
     _reactRouter.BrowserRouter, 
     null, 
     _react2.default.createElement(_reactRouter.Match, { pattern: '/', component: _FrontPage2.default }), 
     _react2.default.createElement(_reactRouter.Match, { pattern: '/home', component: _Home2.default }) 
    ); 
     return returnVal; 
    } 
    }]); 

    return Router; 
}(_react.Component);

我給自己定一個調試器語句，其中的代碼錯誤拋出，我看到以下內容：

從哪裏可以看到返回的react元素是一個數組，因爲錯誤消息意味着它可能是。道具在我的BrowserHistory組件中將這些有問題的組件識別爲路由。

如果我刪除其中一個路由，使得BrowserHistory組件中只有一個元素，它會正確呈現。如果我有Match和Miss組件，它也會給出錯誤。

我不確定從哪裏開始尋找哪個庫出現錯誤。至於我可以看到輸出代碼是有效的，我不知道它爲什麼不正確呈現。

如果有人知道如何解決它，將不勝感激。

來源

2016-09-16 Robin

我遇到同樣的問題。在'create-react-app'中使用它，所以沒有做任何Babel的設置。 –

Router或MatchProvider內部的東西必須封裝在一個div內。

比如下面

<BrowserRouter> 
    <div> 
    <Match exactly pattern="/" component={FrontPage} /> 
    <Match pattern="/home" component={Home} /> 
    </div> 
</BrowserRouter>

MatchProvider返回它的孩子直接，因此它只能有一個孩子。它也可以通過修改陣營路由器庫內MatchProvider.js解決返回

return _react2.default.createElement("div", null, this.props.children);

，而不是

return this.props.children

如果由於某些原因，直接有路由器下的慾望航線。

來源

2016-09-16 11:05:26 Robin

感謝您的羅賓。我正在用'create-react-app'使用RR4，這個問題有點破壞了CRA的目的，它只是起作用！我先將修改應用到RR，然後工作，我升級了CRA和RR並停止工作。用div包裝解決了它。雖然不是很漂亮！ –

反應與巴貝爾路由器v4給多個路由錯誤

回答

相關問題