質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1130閲覧

ReactのRouterがうまく機能しない

yamazaki619

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/01 14:54

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;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問