Приложение React js ничего не рендерит после настройки приставки

Question

Я создал приложение реагирования с помощью create-Reaction-app, и оно отображало страницу по умолчанию.Я изменил app.js в соответствии со своими потребностями и настроил Redux.После этого, когда я запускаю команду запуска npm, она выводит на консоль только пустую страницу без сообщения об ошибке.

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, используйте объекты 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'));