Javascript React js未使用React路由器导航到页面

如果我在我的http://localhost:3000/anything 它的作用与我键入home或/或login相同，没有任何内容。这一页将是空白的

My social.js：

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from '../../containers/Pages/Home/Home';
import Login from '../../containers/Pages/Login/Login';

class Social extends Component {
    render () {
        return (
            <div>
                <Switch>
                    <Route path="/home" exact component={Home} />
                    <Route path="/login" exact component={Login} />
                </Switch>
            </div>
        );
    }
}

export default Social;

app.js：

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';

import Layout from './Layout/Layout'
import Social from './containers/Pages/Social';

class App extends Component {
  render() {
    return (
    <BrowserRouter>
        <div className="App">
        <Layout>
            <Social />
        </Layout>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

你知道怎么了吗？ 谢谢

---编辑，我注意到当我删除。。。在app.js中，它可以工作

my Layout.js：

import React, { Component } from 'react';

import Toolbar from '../components/Navigation/Toolbar/Toolbar';

class Layout extends Component {
    
    render() {
        return (
        <>
            <Toolbar />
        </>
        );
    }
}

export default Layout;

和工具栏：

import React, { Component } from 'react';

import classes from './Toolbar.module.css';

class toolbar extends Component {
    
    render() {
        return(
        <>
            <header className={classes.Toolbar}>
                toolbar
            </header>
        </>
        );
    }
    
}

export default toolbar;

---

我认为您缺少围绕工具栏组件的包装元素

    import React, { Component } from 'react';
    
    import Toolbar from '../components/Navigation/Toolbar/Toolbar';
    
    class Layout extends Component {
        
        render() {
            return (
           <div>
                <Toolbar />
            <div>
            );
        }
    }

export default Layout;

工具栏也一样。应如下所示：

import React, { Component } from 'react';

import classes from './Toolbar.module.css';

class Toolbar extends Component {
    
    render() {
        return(
        <div>
            <header className={classes.Toolbar}>
                toolbar
            </header>
        </div>
        );
    }
    
}

export default Toolbar;

---

在管线中使用精确属性。你想实现什么？看起来一切正常，我测试了你的代码，添加了我自己的组件来代替Home和Login。可能是在呈现主视图或任何组件时出现控制台错误。你能检查一下吗？我想打开/home和/login。但是所有的页面都是blank@Pavan我得到的唯一错误是src\containers\Pages\Home\Home.js第2:8行：“firebase”已定义但从未使用我还粘贴了我的index.js代码…与之前相同的错误，/Home或/login未显示。只有当我从app.js中删除时，他们才会显示内容/请尝试一下这些变化你有没有发现任何运气？我做了变化，但什么都没有/有控制台错误吗？