画面に文字が表示されない react

Question

発生している問題

reactで開発を行なっています。
Login.jsでexportして、Loginという文字を画面に表示させたいのですが、表示されず、エラーも出ていないため困っています。
よろしくお願いいたします

ディレクトリー構成は以下のようになっています

 └── src
　　　　　　　　　　　　　　　├── App.js
　　　　　　　　　　　　　　　├── components
               ├── Login.js
        

該当のソースコード

import {Router, Route} from 'react-router-dom';
import Login from './components/Login';
import './App.css';

function App() {
  return (
    <div className="App">
      <Router>
          <Route>
            <Login />
          </Route>
      </Router>
    </div>
  );
}

export default App;

import styled from 'styled-components';

const Login = (props) => {
    return(
    <Container>
        <Content>
        Login
        </Content>
    </Container>
    );
};

const Container = styled.section`
    overflow: hidden; 
    display: flex;
`;

const Content =  styled.div`

`;

export default Login;

試したこと

エラー、警告ともに何もありません。よろしくお願いいたします。

Comments

[maisumakun]

ルーティングを外して<div>直下に<Login>だけ書いてみて、ルーティングの問題なのか<Login>の問題なのか、切り分けたほうがいいのではないでしょうか？

[hoshi-takanori]

<Route> に path がないのが気になりますね…。

[a_12120103]

切り分けてみたところ、react router domが原因っぽいです...もう少し追求してみます！ありがとうござます！