反应路由器链接不呈现组件但更改了 URL

Question

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'
               <Router>
                <Fragment>
                    <Navbar />
                    <Switch>
                        <Route exact  path="/" component={Landing}/>
                        <Route   path="/developer/register/" component={RegisterDev} />
                        <Route   path="/developer/login/" component={LoginDev} />
                        <Route   path="/developer/dashboard/" component={Landing} />
                        <Route   path="/agency/register/" component={RegisterAgency} />
                        <Route   path="/agency/login/" component={LoginAgency} />

                        <Route component={NotFound} />
                    </Switch>
                </Fragment>
            </Router>

in My NavBar Component

//NavBar.js
<Link to="/"  Home > </Link>

The Problem is when I am in /developer/register or /developer/login component, if I click on Home Link, the URL Changes but not rendering the Landing component. All other components are working fine with Link. Only problem with Link Home to /. I tried withRouter, , Still the URL changes to / but the Landing component not rendering unless I refresh.

For now I am using href / to escape this problem but I want to understand why with Link its not rendering.

Answer 1

Try adding exact in the route path.

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'
               <Router>
                <Fragment>
                    <Navbar />
                    <Switch>
                        <Route exact  path="/" component={Landing}/>
                        <Route exact   path="/developer/register/" component={RegisterDev} />
                        <Route exact   path="/developer/login/" component={LoginDev} />
                        <Route exact   path="/developer/dashboard/" component={Landing} />
                        <Route exact   path="/agency/register/" component={RegisterAgency} />
                        <Route exact   path="/agency/login/" component={LoginAgency} />

                        <Route component={NotFound} />
                    </Switch>
                </Fragment>
            </Router>

Answer 2

<Link to="/"  Home > </Link>

What syntax is this?

Either you are trying to print Home as a label in which case it should be

<Link to="/">Home</Link>

or you are trying to make this as part of your route in which case it should be

<Link to="/Home"/> (Here there won't be a display text though)

Please check your syntax for Link where you are using Link and provide a sandbox if it still doesn't work.

Answer 3

I found the problem. I should have shared my Landing page component in the question. I am using some jquery slider in my Landing component. I suppose react routing will not load the page as everything here is virtual DOM. The reason it was working with href because it is reloading the entire home page.

With little research I found LoadJS Package

Now I can load jquery slider scripts with load js and my Link to / is working fine without a problem. Thanks everyone who commented and responded . I should have posted Landing Page Component.