Question

我使用create-react-app创建了一个react应用，它正在渲染默认页面。我根据需要修改了app.js并设置了redux。之后，当我运行npm start命令时，它将仅呈现一个空白页，并且在控制台中没有错误消息。

App.js

import React, { Component } from "react";
import "./App.css";
import { Router, Route, Redirect } from "react-router";
import { Provider } from "react-redux";
import {store} from "./store/index";
import Home from "./components/common/Home";
import {history} from './store/index'



class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router history={history} >
         <Route path='/home' Component={Home}></Route>
       </Router>
      </Provider>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {store} from "./store/index";
import * as serviceWorker from './serviceWorker';
import './css/index'
import { Router, Route, Redirect } from "react-router";

ReactDOM.render(

<App store={store}/>


, document.getElementById('root'));


serviceWorker.unregister();

store.js

import { createStore,applyMiddleware } from "redux";
import rootReducer from "../reducers/index";
import createHistory from 'history/createBrowserHistory';
import thunk from 'redux-thunk';
import {createLogger} from 'redux-logger';



const getMiddleware =()=>{
 return applyMiddleware(thunk,createLogger())
}
export const history = createHistory();


export const store= createStore(rootReducer,getMiddleware());

减速器：

const initialState = {
    articles: []
};

function rootReducer(state = initialState, action) {
  return state;
};
export default rootReducer;

我无法确定我要去哪里，任何帮助将不胜感激。

Answer 1

尝试通过以下方式设置App.js组件：

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

import Home from "./components/common/Home";

注意，我没有使用react-router，我使用了react-router-dom，这就是您应该使用的。 react-router是为react-router-dom和react-router-dom-native提供支持的主库或核心库。使用react-router-dom。

请注意，我没有store，也没有Provider设置，我们将其保留在您的根index.js文件中。现在，您的App组件的其余部分将如下所示：

const App = () => {
  render() {
    return (
      <div className="ui container">
       <BrowserRouter>
         <div>
          <Route path="/" exact component={Home} />
         </div>
       </BrowserRouter>
    );
  }
}

export default App;

现在转到您的根index.js文件：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";

import App from "./components/App";
import reducers from "./reducers";

const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector("#root")
);

在此放置Provider和store。我只是不需要了store.js文件。

现在在您的第一个化简器中，因为您需要某种类型的化简器来启动应用程序且不会崩溃，所以您可以像这样在reducers/index.js内编写一个化简器：

import { combineReducers } from "redux";

export default combineReducers({
  replaceMe: () => "howdy"
});

您现在有了一个完全运行的无错误的React-Redux应用程序，可以继续进行您的项目。

Answer 2

除非您有充分的理由创建自己的history对象，否则请使用从react-router-dom导出的BrowserRouter或HashRouter对象

并考虑将其放置在正确的位置。.导入您实际将其设置为提供程序的商店，而不是两次导入。

// app.js

import React, { Component } from "react";
import "./App.css";
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store/index";
import Home from "./components/common/Home";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Route path='/home' Component={Home}></Route>
        </BrowserRouter>
      </Provider>

    );
  }
}

export default App;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './css/index'

ReactDOM.render(
  <App />
, document.getElementById('root'));

设置Redux后，React JS应用不会呈现任何内容

2 个答案: