How do I get BrowserRouter to Wrap my Content so my pages will route properly?-CodePudding

Note: I've tried a dozen examples. Some I did find here. None work for me.

I did get Links in React to work sort of, but they add a component to the page, rather than replacing it.
I understand to fix that issue that I need to wrap app in BrowserRouter, but every way I try makes the whole site render blank.

So in <Provider store={store}><App /></Provider> below, if I try to put <BrowserRouter> tags either outside or inside the <Provider> tags, the site renders blank. What I am missing?

Here is my index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import reportWebVitals from "./reportWebVitals";
import { store } from "./store";
import { Provider } from "react-redux";

//header, footer, theme
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
     <Provider store={store}>
        <App />
    </Provider>
 );

reportWebVitals();

My router.js:

   // Routes.js
import React from "react";
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Home from "./pages/home";
import About from "./pages/about";

const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path='/' element={<Home />} />
                <Route path='/About' element={<About />} />
            </Routes>
        </BrowserRouter>
    );
};

export default Router;

And my app.js:

import { useEffect } from "react";

// mui
import { Container } from "@mui/material";
import { ThemeProvider } from "@mui/system";

// theme
import theme from "./styles/theme";

// components
import Footer from "./components/footer";
import Appbar from "./components/appbar";


// styles
import "./App.css";
import About from "./pages/about";
/*import Events from './components/Events/Events';*/
import {Route, Routes } from 'react-router-dom';
import Router from "./router";

// components
import ListArticles from "./components/list-articles";

function App() {
  useEffect(() => {
    document.title = "Home";
  }, []);
    return (
        
    <ThemeProvider theme={theme}>
      <Container
        disableGutters
        maxWidth="xl"
        sx={{
          background: "#fff",
        }}
          >
     <Appbar />
    <Router />
    <Footer />
      </Container>      
    </ThemeProvider>
        
  );
}

export default App;

Note: As soon as I comment out Browser router in my index.js, the site content loads. When I put the browser router tag back, site content is blank. Same affect if browser router tag is inside provider tags.

 /* <BrowserRouter>*/
     <Provider store={store}>
        <App />
        </Provider>
    /*</BrowserRouter>*/

CodePudding user response：

I figured it out. I hope this helps somebody. I needed to add it like the below code in my app.js. Browser Router doesn't belong anywhere else but here, so I removed it from my router.js. Now I can add routes to router.js and links where needed.

  <BrowserRouter>
       <ThemeProvider theme={theme}>
      <Container
        disableGutters
        maxWidth="xl"
        sx={{
          background: "#fff",
        }}
            >
       
          <Appbar />  
          <Router />             
          <Footer />
          </Container>      
        </ThemeProvider>
        </BrowserRouter >

Example of a link:

<Link to="/about">About</Link>

CodePudding user response：

You need only one router to provide a routing context to an entire app. If you are wrapping your routes in one router and your appbar/links in another router then these routers/routing contexts will work independently from each other. In other words, what navigation actions/etc issued or handled in one have no bearing on any navigation actions/etc issued or handled by the other.

Render a single BrowserRouter higher in the ReactTree than any of the components trying to consume the routing context.

Example:

index.js

import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

App

import Router from "./router";

function App() {
  useEffect(() => {
    document.title = "Home";
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <Container
        disableGutters
        maxWidth="xl"
        sx={{ background: "#fff" }}
      >
        <Appbar />
        <Router />
        <Footer />
      </Container>      
    </ThemeProvider>
  );
}

Appbar

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

const Appbar = () => {
  ...

  return (
    ...
    <div className="wrapper">
      <Link to="/about">About</Link>
      ....
    </div>
  );
};

Router

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";

const Router = () => (
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/About' element={<About />} />
    ... other routes
  </Routes>
);

export default Router;

CodePudding user response：

You're missing the EXACT property in your route. If you don't add it to your initial Route component ('/'), the route will still be recognized as correct.

<Route exact path='/' element={<Home />} />