Блог

Я создал приложение react с помощью create-react-app, и оно отображало страницу по умолчанию. Я изменил 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());
  

reducer:

 const initialState = {
    articles: []
};

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

Я не смог определить, где я ошибаюсь.Буду признателен за любую помощь.

Попробуйте настроить свой 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 без ошибок, вы можете продвигаться вперед со своим проектом.

Если у вас нет действительно веских причин для создания собственного history объекта, используйте объекты BrowserRouter или HashRouter, которые экспортируются из react-router-dom

И для того, чтобы расставить вещи в нужных местах.. импортируйте хранилище, в котором вы фактически установили его в качестве поставщика, вместо того, чтобы импортировать его дважды.

// 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'));