CODEWITHSUNDEEP
reactjsreact-router-dom
Hiral
Hiral

Reputation: 77

The link is being rendered but not redirecting using <Link>

I have been trying to redirect the page using <Link> and what i have is that the URL changes but the page does not redirect. Only after i refresh the page, it show.
I have searched and found some links:
1. One on the correct syntax
2. i have implemented the link in small HTML

Now here is the part of my Code

App.Js

import React from 'react';

import { Switch , Route , BrowserRouter } from 'react-router-dom';
import HomePage from './section/home';
import Oneup from './section/oneup';

function App() {
  return (
    <div className="main homepage">
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/" component={HomePage} exact={true} />
            <Route path="/oneup" component={Oneup} exact={true} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

main_content.js

Here i have included <Link>

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

class Main_content extends Component {
  render() {
    return (
      <div class="ib-center">
         <BrowserRouter>
            <Link to="/oneup" class="btn">VIEW CASE</Link>
         </BrowserRouter>
      </div>
    )
  }
}

Now i can't figure out where i am going wrong.
the link generated is fine and working when refreshed manually.

Upvotes: 1

Views: 323

Answers (1)

U.A
U.A

Reputation: 3383

Use one BrowerRouter to wrap, you have used BrowerRouter in App.js and main_content.js too

class Main_content extends Component {
  render() {
    return (
      <div class="ib-center">
         <div>
            <Link to="/oneup" class="btn">VIEW CASE</Link>
         </div>
      </div>
    )
  }

Upvotes: 1

Related Questions