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

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

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

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

React.js

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

解決済

React dom Routerが上手く表示されない

Shmupeiii
Shmupeiii

総合スコア83

JavaScript

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

React.js

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

1回答

0評価

0クリップ

335閲覧

投稿2021/12/26 12:52

前提・実現したいこと

https://takoyan33.github.io/todo_react_app/

にて、TodoListをReactで作っています。

githubのソースコード。
https://github.com/takoyan33/todo_react_app

発生している問題・エラーメッセージ

React dom Routerを使い、Aboutページに移動させたいと考えており、
ABoutページを表示させることができました。

https://takoyan33.github.io/about

しかし何故かApp.jsでしか表示させていないTOdoの入力欄や未完了のTODOや完了のTODOが表示されています。
イメージ説明

該当のソースコード

JavaScript

//About.js export const About = () => { return ( <> <h1>About</h1> <p>aaaaaaaaa</p> </> ); }

JavaScript

//App.js // import Button from '@mui/material/Button'; import React, { useState } from 'react'; import "./App.css"; import "./index.css"; import InputTodo from "./components/InputTodo"; import { IncompleteTodos } from "./components/IncompleteTodos"; import{ CompleteTodos} from "./components/CompleteTodos"; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import MenuIcon from '@mui/icons-material/Menu'; import { BrowserRouter, Switch, Route, Link } from "react-router-dom"; import { About } from "./About.js" export const App = () => { <head> <meta name="viewport" content="initial-scale=1, width=device-width" /> </head> const [todoText, setTodoText] = useState(""); const [incompleteTodos, setIncompleteTodos] = useState([""]); const [completeTodos, setCompleteTodos] = useState([""]); const onChangeTodoText = (event) => setTodoText(event.target.value); const onClickAdd = () => { if (todoText === "") return; const newTodos = [...incompleteTodos, todoText]; setIncompleteTodos(newTodos); setTodoText(""); }; const onClickDelete = (index)=> { const newTodos =[...incompleteTodos]; newTodos.splice(index, 1); setIncompleteTodos(newTodos); }; const onClickComplete = (index) => { const newIncompleteTodos =[...incompleteTodos]; newIncompleteTodos.splice(index, 1); const newCompleteTodos = [...completeTodos, incompleteTodos[index]]; setIncompleteTodos(newIncompleteTodos); setCompleteTodos(newCompleteTodos); } const onClickBack = (index) => { const newCompleteTodos =[...completeTodos]; newCompleteTodos.splice(index, 1); const newIncompleteTodos = [...incompleteTodos, completeTodos[index]]; setCompleteTodos(newCompleteTodos); setIncompleteTodos(newIncompleteTodos); } // const [value, setValue] = React.useState(0); return ( <> <BrowserRouter> <Box sx={{ flexGrow: 1 }}> <AppBar position="static"> <Toolbar> <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} > <MenuIcon /> </IconButton> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> <Link to="/">TodoList</Link> </Typography> <Button color="inherit"> <Link to="/about">About</Link> </Button> </Toolbar> </AppBar> <Switch> <Route exact path="/about"> <About /> </Route> {/* <Route exact path="/"> <App /> </Route> */} </Switch> </Box> </BrowserRouter> {/* <Box sx={{ flexGrow: 1 }}> <AppBar position="static"> <Toolbar> <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} > <MenuIcon /> </IconButton> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> TodoList </Typography> <Button color="inherit"> About </Button> </Toolbar> </AppBar> </Box> */} <div className=""> <InputTodo todoText={todoText} onChange={onChangeTodoText} onClick={onClickAdd} disabled={incompleteTodos.length >= 5 } /> {incompleteTodos.length >= 5 && <p className="text-red-400">登録できるtodoは5個までです。 </p> } <IncompleteTodos todos={incompleteTodos} onClickComplete={onClickComplete} onClickDelete={onClickDelete} /> <CompleteTodos todos={completeTodos} onClickBack={onClickBack} /> </div> </> );}; export default App; </> );}

試したこと

検索してみたが、上手く見つかりませんでした。

補足情報(FW/ツールのバージョンなど)

"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.2.5",
"@mui/material": "^5.2.5",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"gh-pages": "^3.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"
}

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2021/12/26 14:04

InputTodo や CompleteTodos などが Switch の外にあるので、常に表示されるのは当然では…。
Shmupeiii

2021/12/27 00:49

回答ありがとうございます。 解決できました。初歩的なミスですみません。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

React.js

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