Question 223965 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – When I click the sign-up button it's not going to the sign up component

What I’m aiming for is when I click the sign up button is that it would go to the component SignUp. But unfortunately it’s not routing or functioning.

App.js:

import React from "react";
import "./styles/App.css";
import Homepage from "./pages/homepage";
import { Routes, Route } from "react-router-dom";

export const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" />
      </Routes>
    </>
  )
  <Homepage/>
};

export default App;

Body.js:

import React from "react";
import { BrowserRouter, Routes, Link, Route, Switch } from "react-router-dom";
import SignUp from "../pages/signUp";

const Body = () => {
  return (
    <div>
      <BrowserRouter>
        <button type="button" id="signup-btn">
          <Link to="/signup">Sign up</Link>
        </button>
        <Switch>
          <Route path="/signup" element={SignUp}/>
        </Switch>
      </BrowserRouter>
    </div>
  )
}

export default Body;

Any suggestions? Or should I rewrite my code where navbars are separated?

Tags:

2

Answers


  1. 0

    First, in your App.js file, make sure to import the BrowserRouter from react-router-dom and wrap the entire application with it:

    import React from "react";
import "./styles/App.css";
import Homepage from "./pages/homepage";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Homepage />} />
      </Routes>
    </Router>
  );
};

export default App;

    Now, in your Body.js file, remove the unnecessary <BrowserRouter> element since it’s already used in App.js.
    Instead, use the Link component to navigate to the SignUp component:

    import React from "react";
import { Link } from "react-router-dom";
import SignUp from "../pages/signUp";

const Body = () => {
  return (
    <div>
      <button type="button" id="signup-btn">
        <Link to="/signup">Sign up</Link>
      </button>
    </div>
  );
};

export default Body;
    Login or Signup to reply.
  2. 0

    Assuming that the HomePage component in App is the Body component from the second snippet you’ve a few things mixed up.

    Promote the BrowserRouter above the App component so it’s the sole routing context provider.

    import { BrowserRouter } from "react-router-dom";

...

<BrowserRouter>
  <App />
</BrowserRouter>

    From here you have a couple choices:

    1. Render Homepage on the root "/" route with an appended "*" wildcard character so that descendent routes can also be matched and rendered.

      import React from "react";
import "./styles/App.css";
import Homepage from "./pages/homepage";
import { Routes, Route } from "react-router-dom";

export const App = () => {
  return (
    <Routes>
      <Route path="/*" element={<Homepage />} />
    </Routes>
  );
};

export default App;

    2. Remove the Routes and root "/" route from App and just render HomePage directly.

      import React from "react";
import "./styles/App.css";
import Homepage from "./pages/homepage";
import { Routes, Route } from "react-router-dom";

export const App = () => {
  return <Homepage />;
};

export default App;

    The Switch is a RRDv5 component and was replaced by the Routes component. The Route component’s element prop takes a React.ReactNode, e.g JSX. I suggest also renaming the component from Body to HomePage so there’s no future confusion.

    import React from "react";
import { Routes, Link, Route } from "react-router-dom";
import SignUp from "../pages/signUp";

const HomePage = () => {
  return (
    <div>
      <button type="button" id="signup-btn">
        <Link to="/signup">Sign up</Link>
      </button>
      <Routes>
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </div>
  )
}

export default HomePage;

    Or should I rewrite my code where navbars are separated?

    I think this is a good idea. A refactor may look something like the following:

    import React from "react";
import "./styles/App.css";
import Homepage from "./pages/homepage";
import SignUp from "../pages/signUp";
import Navbar from "../components/navbar";
import { Routes, Route } from "react-router-dom";

export const App = () => {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </div>
  );
};

export default App;

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

const Navbar = () => {
  return (
    <div>
      ...
      <button type="button" id="signup-btn">
        <Link to="/signup">Sign up</Link>
      </button>
      ...
    </div>
  )
}

export default Navbar;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search