Question

我已将 index.js 文件包装起来，以支持 Redux商店和 React-Router-v4 。

但是，当我尝试运行基本测试时，收到以下错误消息：

Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

以下是我的 index.js ：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';

// Redux
import { Provider } from 'react-redux';
import store from "./store/index";

ReactDOM.render((
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
), document.getElementById('root'));
registerServiceWorker();

这是我的 App.js ：

import React, { Component } from 'react';
import { ScaleLoader } from 'react-spinners';
import { withRouter } from 'react-router';
import Header from './components/Header';
import Footer from './components/Footer';
import Main from './Main';
import './styles/styles.scss';

// Redux
import { connect } from 'react-redux';
import store from "./store/index";
import { isLoading } from "./actions/index";

class App extends Component {
    constructor() {
        super();

        store.dispatch(isLoading(true));
    }

    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            store.dispatch(isLoading(true));
        }
    }

    render() {
        return (
            <div className='App'>
                <Header />
                <div className='App__wrapper'>
                    <div className={'loading-spinner ' + (this.props.isLoading ? null : '--hide-loader')}>
                        <ScaleLoader
                            color={'#123abc'}
                            loading={this.props.isLoading}
                        />
                    </div>
                    <Main />
                </div>
                <Footer />
            </div>
        );
    }
}

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

export default withRouter(connect(mapStateToProps)(App));

由于我正在使用 withRouter 来换行导航，这种方法是否不鼓励？我应该在 index.js 级别设置 withRouter 吗？

谢谢！

Answer 1

尝试像这样导入您的BrowserRouter：

import { BrowserRouter as Router } from 'react-router-dom'

然后在任何地方替换它出现的BrowserRouter与路由器。

您不应该在<router>之外使用<route>或withRouter（）

1 个答案: