Only url changes not the view or component onclick anchor tag

Question

I am trying to access the component view from the menu in navbar, but whenever I click on link , only the url changes not the view.

My code:

App.js

function App() {
  return (
    <div className="App">
      <Header />
      <Index />
      <Footer />
    </div>
  );
}

export default App;

index.js

const routing = (
        <Router>
          <Switch>
            <Route exact path="/" component={withRouter(App)} />
            <Route exact path="/register" component={withRouter(Register)} />
          </Switch>
        </Router>
);


const Store = createStore(
    allReducers,
    routing,
);

ReactDOM.render(
  <Provider store={Store}>
  <App />
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

Header.js

<ul class="nav-list">
      <li class="nav-list-item">
          <Link to="/">Home</Link>
      </li>
      <li class="nav-list-item">
          <Link to="/register">Register</Link>
      </li>            
 </ul>

Where I am doing wrong?

I think you should use `withRouter` in components where you export them not in the `Route`. — Dipesh Bajgain, Aug 01 '19 at 09:56

score 0 · Answer 1 · answered Aug 01 '19 at 13:39

You need to actually render your Routes rather than put them into your redux store.

Also, no need to wrap your components with withRouter since they are already receiving the props from the Route component.

const Store = createStore(allReducers);

ReactDOM.render(
<Router>
  <Provider store={Store}>
    <Switch>
      <Route exact path="/" component={App} />
      <Route exact path="/register" component={Register} />
    </Switch>
  </Provider>
</Router>,
  document.getElementById('root')
);

serviceWorker.unregister();

I've basically rewritten your case to be like it is in basic react-router setup. Please refer to this basic example from the documentation and try to see how it is different from your code. https://reacttraining.com/react-router/web/example/basic — Mark Shulhin, Aug 09 '19 at 08:14

score 0 · Answer 2 · answered Aug 04 '19 at 12:20

Finally i got the solution of my own question.

First of all i written the routing in app.js and bind everything in browserrouter like this.

<BrowserRouter>
    <div className="App">
      <Header />
      <Switch>
         <Route exact path="/" component={Index} />
         <Route path="/about" component={About} />
      </Switch>
    </div>
</BrowserRouter>

Only url changes not the view or component onclick anchor tag

2 Answers2