Javascript React JS路由仅在重新加载时有效

我的reactJS路由有问题，当我点击一个链接时，地址栏上的URL会改变，但它不会呈现组件，除非我重新加载页面

这是我的代码：

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';

if (document.getElementById('root')) {
    ReactDOM.render(
        <BrowserRouter>
                <Switch>
                    <Route path="/home" component={Home} exact={true} />
                    <Route path="/products/add" component={CreateProduct} exact={true} />
                    <Home />
                </Switch>
        </BrowserRouter>,
        document.getElementById('root'));
}

Home.js

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

export default class Home extends Component {
    render(){
        return(
            <BrowserRouter>
                <Link className="nav-link" to="/products/add">Create Product</Link>
            </BrowserRouter>
        );
    }
}

CreateProduct.js

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

export default class CreateProduct extends Component{

    render(){
        return(
            <BrowserRouter>
                <Link className="nav-link" to="/home"></Link>
            </BrowserRouter>
        );
    }
}

---

请问我在这里遗漏了什么？

我复制了您的代码，如果我不使用嵌套的BrowserRouter，我不会有任何问题，就像您使用的那样。我认为你只需要根目录，在Index.js中，因为你已经用浏览器路由器包装了你的应用程序，它的属性应用于它包装的所有东西，所以你不需要在每个组件中使用它

另外，如果您希望路由是精确的，只需编写精确的，而不是精确的={true}

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';

if (document.getElementById('root')) {
    ReactDOM.render(
        <BrowserRouter>
                <Switch>
                    <Route path="/home" component={Home} exact />
                    <Route path="/products/add" component={CreateProduct} exact />
                    <Home />
                </Switch>
        </BrowserRouter>,
        document.getElementById('root'));
}


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link} from "react-router-dom";

export default class Home extends Component {
    render(){
        return(
            <Link className="nav-link" to="/products/add">Create Product</Link>
        );
    }
}