警告：您不应该在同一路由中使用 <Route component> 和 <Route render>； <Route render> 将被忽略答案

【问题标题】：Warning: You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored警告：您不应该在同一路由中使用 <Route component> 和 <Route render>； <Route render> 将被忽略
【发布时间】：2019-08-08 08:36:21
【问题描述】：

您好，如果没有身份验证，我会尝试保护路由，但它不起作用

警告：您不应该在同一路由中使用 Route 组件和 Route 渲染；路由渲染将被忽略

App.js

  import React, { Fragment, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import NavBar from './component/Layout/NavBar';
import Landing from './component/Layout/Landing';
import Login from '../src/component/Auth/Login';
import Register from '../src/component/Auth/Register';
import Dashboard from './component/dashboard/Dashboard';
import Alert from './component/Auth/Alert';
import PrivateRoute from './component/routing/PrivateRoute';

import './App.css';

// Redux
import { Provider } from 'react-redux';
import store from './store';
import setAuthToken from './utils/token';

import { loadUser } from './action/auth';


if (localStorage.token) {
  setAuthToken(localStorage.token);
}
const App = () => {

  useEffect(() => {
    store.dispatch(
      loadUser());
  }, []);

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <NavBar />
          <Route exact path="/" component={Landing}></Route>
          <section className="container">
            <Alert />
            <Switch>
              <Route exact path="/login" component={Login}></Route>
              <Route exact path="/register" component={Register}></Route>
              <PrivateRoute exact path="/dashboard" component={Dashboard}></PrivateRoute>
            </Switch>
          </section>
        </Fragment>
      </Router>
    </Provider>
  );
};

export default App;

PrivateRoute.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({
  componet: Component,
  auth: { isAuthenticated, loading },
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      !isAuthenticated && !loading ? (
        <Redirect to="/login" />
      ) : (
        <Component {...props} />
      )
    }
  />
);

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps)(PrivateRoute);

警告：您不应该在同一路由中使用“路由组件”和“路由渲染”； “路由渲染”将被忽略

我该如何解决？

【问题讨论】：

标签： reactjs react-router-v4

【解决方案1】：

来自route rendering method：

有 3 种方法可以使用 <Route> 渲染内容：
- <Route component>
- <Route render>
- <Route children>
每个都在不同的情况下有用。您应该在给定的
上只使用这些道具中的一个

PrivateRoute 包含 component 和 render 属性。您只能使用一种渲染方法，但不能同时使用两种方法。

<PrivateRoute exact path="/dashboard" component={Dashboard}></PrivateRoute> // here

const PrivateRoute = ({
  ...
}) => (
  <Route
    render={props => ()} // here
  />
);

修复 ：将 component 属性重命名为 comp，因为它充当 HOC：

// rename prop to `comp`
<PrivateRoute exact path="/dashboard" comp={Dashboard}></PrivateRoute>

const PrivateRoute = ({
  comp: Component, // use comp prop
  auth: { isAuthenticated, loading },
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      !isAuthenticated && !loading ? (
        <Redirect to="/login" />
      ) : (
        <Component {...props} />
      )
    }
  />
);

【讨论】：

错误的实际原因是使用...rest，当发生这种情况时，您会同时传递子组件和混淆反应的组件，解决方案不是重命名而是简单地将porps读为`` {组件， auth: { isAuthenticated, loading }, ...rest } ```
...rest 不应包含 component（也不应包含 Component），因为 component 明确出现在解构声明中。

【解决方案2】：

使用<Route render={() => <YourComponent />} /> 而不是<Route component={YourComponent} />。

不要把这两个结合起来，react 不喜欢那样。

【讨论】：