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

Question

I am having issues with my reactJS routes, When I click on a link, the URL changes on the address bar but it won't render the component except I reload the page.

This is my code:

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>
        );
    }
}

Please what am I missing here?

Answer 1

I copied your code and I don't have any issue when I don't use nested BrowserRouters, as you have used. I think you only need the root one, in Index.js

Answer 2

As you already wrapped your app with browser router it's properties are applied to everything it wraps so you don't need to use it in every component.

Also if you want the route to be exact just write exact instead exact={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>
        );
    }
}