react-router-dom#BrowserRouter JavaScript Examples

// ----------------------------------------------------------------------

ReactDOM.render(
  <HelmetProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </HelmetProvider>,
  document.getElementById('root')
);

render(){
    if (this.state.redirect) {
      return <Redirect to={this.state.redirect} />;
    }
  return (
    <BrowserRouter>
    <div data-testid="HeaderBody">
      <h2 data-testid="title" className="gray-text likedSongsTitle">
        Liked Songs
      </h2>
      <button
        data-testid="owner"
        className="playlistAnchor songButton block"
        onClick={() => {
          this.redirect(`/profile/${this.state.id}`)
        }}
      >
      {this.state.displayName}
      </button>
      <button
        onClick={()=>this.handlePlayClick}
        data-testid="playButton"
        className="playButton"
        variant="outline-success"
      >
        {this.props.playing ? "PAUSE" : "PLAY"}
      </button>
      <p className="likedSongsTitle gray-text">
        <span data-testid="songsNumber">{this.props.length} </span>
        <span data-testid="songsLiteral">{this.props.length > 1 ? "songs" : "song"}</span>
      </p>
    </div>
    </BrowserRouter>
  );
      
}

App = () => (
  <BrowserRouter>
    <UserProvider>
      <NotificationsProvider>
        <ThemeProvider>
          <ConfirmProvider>
            <Suspense fallback={<LinearProgress />}>
              <CssBaseline />
              <Navigation />
            </Suspense>
          </ConfirmProvider>
        </ThemeProvider>
      </NotificationsProvider>
    </UserProvider>
  </BrowserRouter>
)

// const Pokedex = React.lazy(() => import("./pages/Pokedex"));
// const Home = React.lazy(() => import("./pages/Home"));
// const Pokemon = React.lazy(() => import("./pages/Pokemon"));

function App() {
  return (
    <BrowserRouter>
      <div style={{ backgroundColor: "#fff" }}>
        <Route path="/" exact component={Pokedex} />
        <Route path="/pokedex" exact component={Pokedex} />
        <Route path="/pokemon/:pokemonIndex" exact component={Pokemon} />
      </div>
    </BrowserRouter>
  );
}

beforeEach(() => {
  const { container, rerender } = render(
    <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
      <BrowserRouter>
        <MyRoutes></MyRoutes>
      </BrowserRouter>
    </IntlProvider>
  );
  myRoutes = container;
  rerenderFunc = rerender;
});

render() {
    return (
        
        <BrowserRouter>
        <Navbar2/>
        <Switch>
            
            <Route path="/MusicData" component={MusicData}/>
            <Route path="/" component={MusicUploader}/>
        </Switch>
        </BrowserRouter>
    );
  }

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>,

  document.getElementById("root")
);

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <UserProvider>
        <App />
      </UserProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter history={history}>
      <PersistGate persistor={persistor}>
        <Auth0Provider
          domain={config.domain}
          client_id={config.clientId}
          redirect_uri={window.location.origin}
          audience={config.audience}
          onRedirectCallback={onRedirectCallback}
        >
          <App />
        </Auth0Provider>
      </PersistGate>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

renderWithReduxAndRouter = ui => {
  return {
    ...render(
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>{ui}</BrowserRouter>
        </ThemeProvider>
      </Provider>
    ),
    store,
  }
}

describe("LandingPage has buttons", () => {
  test("LandingPage has register button", () => {
    const { getByText } = renderRedux(
      <BrowserRouter>
        <LandingPage />
      </BrowserRouter>,
      {
        initialReducerState: {},
      }
    );
    expect(getByText(/Register/i)).toBeVisible();
  });
  test("LandingPage has login button", () => {
    const { getByText } = renderRedux(
      <BrowserRouter>
        <LandingPage />
      </BrowserRouter>,
      {
        initialReducerState: {},
      }
    );
    expect(getByText(/login/i)).toBeVisible();
  });
});

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>,

    div
  );
});

App = () => {
  const dispatch = useDispatch()
  const { isLoading, error } = useSelector(state => state.app)

  useEffect(() => {
    if (!!error) {
      alert(error);
      dispatch({type : actions.RESET_ERROR})
    }
  }, [error])

  return (
    <>
      {isLoading && <PageLoader />}
      <BrowserRouter>
        <NormalizeStyles />
        <BaseStyles />
        <Router />
      </BrowserRouter>
    </>
  )
}

function AppRouter() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Landing} />
        <Security
          {...oktaConfig}
          onAuthRequired={() => {
            if (window.location.pathname !== "/login") {
              window.location.pathname = "/login";
            }
          }}
        >
          <App />
        </Security>
      </Switch>
    </BrowserRouter>
  );
}

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    div
  );
});

describe('DeletionDialog', () => {
  it('should render a DeletionDialog component ', () => {
    const store = mockStore();
    window.HTMLCanvasElement.prototype.getContext = () => {};

    const wrapper = mount(
      <Provider store={store}>
        <BrowserRouter>
          <DeletionDialog
            setShowDeletionDialog={() => {
              return 'test';
            }}
          />
        </BrowserRouter>
      </Provider>
    );
    expect(wrapper.find('DeletionDialog')).toMatchSnapshot();
  });
});

describe('LinkOrExternal', () => {
  it('should contain a "a" for external link', () => {
    render(<LinkOrExternal to={HTTPS_EXTERNAL_LINK}>Test link</LinkOrExternal>);
    expect(screen.getByTestId('external-link-node')).toBeTruthy();
  });

  it('should contain a Link component for internal link', () => {
    render(
      <BrowserRouter>
        <LinkOrExternal to={INTERNAL_LINK}>Test link</LinkOrExternal>
      </BrowserRouter>,
    );
    expect(screen.getByTestId('internal-link-node')).toBeTruthy();
  });
});

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/admin" component={Admin} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

RouterComponent = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path={paths.LOGIN} component={Login} />
        <Route exact path={paths.RESET_PASSWORD} component={ResetPassword} />
        <PrivateRoute path={paths.ADD_USER} component={User} />
        <PrivateRoute path={paths.MODIFY_USER} component={User} />
        <PrivateRoute path={paths.USERS} component={Users} />
        <PrivateRoute path={paths.PROFILE} component={Profile} />
        <PrivateRoute path={paths.SECTION} component={Section} />
        <PrivateRoute path={paths.SUBMENU_1} component={Submenu} />
        <PrivateRoute path={paths.SUBMENU_2} component={Submenu} />
        <PrivateRoute path={paths.ROOT} component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

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

App = () => {
  const { userId } = useContext(Context);
  const { isHost } = useContext(Context);
  const isLogged = userId && (isHost !== null);
  const isLoggedHost = isLogged && isHost;

  return (
    <BrowserRouter>
      <GlobalStyle />
      <Switch>
        <Route exact path='/' component={isLogged ? Home : Signin} />
        <Route exact path='/signin' component={isLogged ? Home : Signin} />
        <Route exact path='/signup' component={isLogged ? Home : Signup} />
        <Route exact path='/create/place' component={isLoggedHost ? CreatePlace : Home} />
        <Route exact path='/create/profile' component={isLogged ? Home : CreateProfile} />
        <Route exact path='/places/:placeId' component={isLogged ? ViewRoom : Signin} />
        <Route exact path='/favorites' component={isLogged ? Favorites : Signin} />
        <Route exact path='/profile/:profileId' component={ViewProfile} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

render() {
        return (
            <Provider store={store}>
                <BrowserRouter>
                    <HomeRoutes/>
                </BrowserRouter>
            </Provider>
        );
    }

export default function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Logon} exact />
        <Route path="/register" component={Register} exact />
        <Route path="/profile" component={Profile} exact />
        <Route path="/incidents/new" component={NewIncident} exact />
      </Switch>
    </BrowserRouter>
  );
}

App = () => {
  
  return (
    <BrowserRouter>
      <Header />
    <Routes>
      <Route path= "/upload" element={<Upload />}/>
      <Route path= "/" element={<Home />}/>
    </Routes>
  </BrowserRouter>
  )
}

function App() {
  return (
    <div className="center__view App">
      {/* header component */}
      <Header />

      <BrowserRouter>
        <Route path="/" exact component={LandingPage} />
        <Route path="/team" exact component={Team} />
        <Route path="/products" exact component={Products} />
        <Route path="/careers" exact component={Careers} />
        <Route path="/contact-us" exact component={ContactUs} />
        {/* routes for re-direction to external links */}
        <Route path="/discord" exact component={Discord} />
        <Route path="/twitter" exact component={Twitter} />
        <Route path="/github" exact component={GitHub} />
        <Route path="/linkedin" exact component={LinkedIn} />
        <Route path="/yash" exact component={() => PersonalLinks('yash')} />
      </BrowserRouter>
      {/* footer component */}
      <Footer />
    </div>
  );
}

makeMainRoutes = () => {
    return (
      <BrowserRouter history={history} component={App}>
          <div>
            {/* '/' route*/}
            <Route path="/" render={(props) => <App auth={auth} {...props} />} />
            {/* 'Homepage' route*/}
            <Route path="/home" render={(props) => <Home auth={auth} {...props} />} />
            {/* 'Chat' route*/}
            <Route path="/chat" render={(props) => (
              !auth.isAuthenticated() ? (
                <Redirect to="/home"/>
              ) : (
                <Chat auth={auth} {...props} />
              )
            )} />
            {/* 'Profile' route*/}
            <Route path="/profile" render={(props) => (
              !auth.isAuthenticated() ? (
                <Redirect to="/home"/>
              ) : (
                <Profile auth={auth} {...props} />
              )
            )} />
            {/* 'Callback' route*/}
            <Route path="/callback" render={(props) => {
              handleAuthentication(props);
              return <Callback {...props} />
            }}/>        
          </div>
        </BrowserRouter>
    );
  }

App = () => {
  // Restore user information on refresh
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <Navbar />
        <Route exact path='/' component={Landing} />
        <Route exact path='/checkloggedin' component={CheckLoggedIn} />
        <SemiPrivateRoute exact path='/helform' component={HelForm} />
        <PrivateRoute exact path='/Dashboard' component={Dashboard} />
        <PrivateRoute exact path='/helData' component={HELData} />
        <PrivateRoute exact path='/create' component={CreateTimeTable} />
        <PrivateRoute exact path='/aboutUs' component={About} />
      </BrowserRouter>
    </Provider>
  );
}

export default function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Logon} />
        <Route path="/register" component={Register} />
        <Route path="/profile" component={Profile} />
        <Route path="/incidents/new" component={NewIncident} />
      </Switch>
    </BrowserRouter>
  );
}

Routes = () => (
	<BrowserRouter>
		<Switch>
			<Route exact path='/' component={Login} />
			<Route path='/createfisicalperson' component={CreateFisicalPerson} />
			<Route path='/createlegalperson' component={CreateLegalPerson} />
			<Route component={NoMatch} />
			{/* <PrivateRoute component = {Dashboard} /> */}
		</Switch>
	</BrowserRouter>
)