Javascript ReactJS路由器不'；除非刷新页面，否则无法加载组件

ReactJS router不会在不同的路径中加载组件，除非我刷新，即使我使用相同的安装创建了不同的项目，并且它确实可以正常工作，但在我当前的项目中它不能

App.js

import React, {Component} from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Navigation from './components/Navigation'
import Home from './components/Home'
import Blogs from './components/Blogs'
import Footer from './components/Footer'
import Services from './components/Services'

class App extends Component {
  render(){
  return (
    <BrowserRouter>
      <div className='grid-container'>
          <Navigation />
            <div className='content'>  
                <Route path='/blogs' component={Blogs} />
                <Route path='/' component={Home}  exact/>
                <Route path='/' component={Services}/>
            </div>
            <Footer />
          </div>
    </BrowserRouter>
  );
}
}

export default App;

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“./components/Navigation”导入导航
从“./components/Home”导入主页
从“./components/Blogs”导入博客
从“./components/Footer”导入页脚
从“./components/Services”导入服务
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

Home.js

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

const Home = () => {
    return (
        <BrowserRouter>
            <section className="carousel-section-wrapper home">
                    <div className="carousel-inner">
                        <div className="carousel-section carousel-item active clip-bg pt-225 pb-200 img-bg">
                            <div className="container">
                                <div className="row">
                                    <div className="col-xl-8 col-lg-10 mx-auto">
                                        <div className="carousel-content text-center">
                                            <div className="section-title">
                                                <h2>test content</h2>
                                                <p className="text-white">test content</p>
                                            </div>
                                            <Link to="/blogs" className="theme-btn">Read My Blogs</Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </section>
        </BrowserRouter>

    )
}

export default Home

从“React”导入React；
从“react router dom”导入{Link，BrowserRouter}
常量Home=（）=>{
返回(
测试内容
测试内容

阅读我的博客
)
}
导出默认主页

Blogs.js

    import React from 'react';
    
    const Blogs = () => {
        return (
            <h1>Blogs</h1>
            
        )
    }

export default Blogs

从“React”导入React；
const博客=（）=>{
返回(
博客
)
}
导出默认博客

预期结果：组件主页和服务消失，当我单击任何按钮重定向到/blogs时，blogs组件出现

实际结果：除非刷新浏览器，否则页面状态保持不变

---

非常感谢您的帮助。

您在嵌套组件、应用程序和家庭组件中使用了

BrowserRouter

，但无法以这种方式工作。要解决此问题，您只需在应用程序组件中安装浏览器路由器。

是，这是正确的解决方案。非常感谢。我很高兴它帮助了你：）如果你找到了答案，我很感激你选择它作为这个问题的答案：）