ReactでSPIの作成をしようと考えています。
ですが、npm start で画面を表示しても、Home.jsx が表示されません。
エラーメッセージや警告なども表示されていないため、どこを修正すれば良いのかがわかりません。
知識のある方お教えいただければ幸いです。。
store
1import { 2 createStore as reduxCreateStore, 3 combineReducers, 4 applyMiddleware 5} from 'redux'; 6import { connectRouter, routerMiddleware } from 'connected-react-router'; 7import { ProductReducer } from '../product/reducers'; 8import thunk from 'redux-thunk'; 9 10export default function cretateStore(history) { 11 return reduxCreateStore( 12 combineReducers({ 13 router: connectRouter(history), 14 products: ProductReducer 15 }), 16 applyMiddleware( 17 routerMiddleware(history), 18 thunk 19 ) 20 ); 21}
index
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import { Provider } from 'react-redux'; 4import createStore from './redux/store/store'; 5import { ConnectedRouter } from 'connected-react-router'; 6import * as History from 'history'; 7import './index.css'; 8import App from './App'; 9import * as serviceWorker from './serviceWorker'; 10 11const history = History.createBrowserHistory(); 12export const store = createStore(history); 13 14ReactDOM.render( 15 <Provider store={store}> 16 <ConnectedRouter history={history}> 17 <App /> 18 </ConnectedRouter> 19 </Provider>, 20 document.getElementById('root') 21); 22 23// If you want your app to work offline and load faster, you can change 24// unregister() to register() below. Note this comes with some pitfalls. 25// Learn more about service workers: https://bit.ly/CRA-PWA 26serviceWorker.unregister();
Router
1import React from 'react'; 2import { Switch, Route } from 'react-router'; 3import { Home, About } from './templates'; 4 5const Router = () => { 6 return( 7 <Switch> 8 <Route exact path={"(/)?"} component={Home} /> 9 <Route exact path={"/about"} component={About} /> 10 </Switch> 11 ); 12}; 13 14export default Router;
App
1import React from "react"; 2import Router from './Router'; 3 4const App = () => { 5 return( 6 <main> 7 <Router /> 8 </main> 9 ) 10} 11 12export default App;
あなたの回答
tips
プレビュー