react-router-dom Switch JavaScript Examples

Source File: deck-mode.jsx From MDXP with MIT License

6 votes

DeckMode = ({
  children,
  extracted,
  keyboardTarget,
  touchTarget,
  slideNavigation = true,
  modeNavigation = true,
  ...props
}) => {
  const basepath = props.basepath ? props.basepath : '';
  const slides = React.Children.toArray(children);

  return (
    <HashRouter {...props}>
      <RootState mode={deckModes.NORMAL} basepath={basepath} extracted={extracted} slideLength={slides.length}>
        <Switch>
          <Redirect exact from="/" to={deckModes.properties[deckModes.NORMAL].path} />
          {
            deckModes.properties.map(({Component, name, path}) => (
              <Route path={`/${path}`} key={name}>
                <Component
                  keyboardTarget={keyboardTarget}
                  touchTarget={touchTarget}
                  slideNavigation={slideNavigation}
                  modeNavigation={modeNavigation}
                >
                  {slides}
                </Component>
              </Route>
            ))
          }
        </Switch>
      </RootState>
    </HashRouter>
  );
}

Source File: index.js From uniswap-v1-frontend with GNU General Public License v3.0

6 votes

export default function Pool({ params }) {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search)
  }, [])

  const AddLiquidityParams = () => <AddLiquidity params={params} />

  const RemoveLiquidityParams = () => <RemoveLiquidity params={params} />

  const CreateExchangeParams = () => <CreateExchange params={params} />

  return (
    <>
      <ModeSelector />
      {/* this Suspense is for route code-splitting */}
      <Suspense fallback={null}>
        <Switch>
          <Route exact strict path="/add-liquidity" component={AddLiquidityParams} />
          <Route exact strict path="/remove-liquidity" component={RemoveLiquidityParams} />
          <Route exact strict path="/create-exchange" component={CreateExchangeParams} />
          <Route
            path="/create-exchange/:tokenAddress"
            render={({ match }) => {
              return (
                <Redirect to={{ pathname: '/create-exchange', state: { tokenAddress: match.params.tokenAddress } }} />
              )
            }}
          />
          <Redirect to="/add-liquidity" />
        </Switch>
      </Suspense>
    </>
  )
}

Source File: App.js From Elemento with MIT License

6 votes

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path='/elements'>
          <Elements />
          
        </Route>
        <Route exact path='/contribute'>
          <Contribute />
          
        </Route>
        <Route exact path='/team'>
          <Team />
        </Route>
        <Route exact path='/'>
        <Home />
        </Route>
      </Switch>
    </Router>
  );
}

Source File: library.jsx From Oud with MIT License

6 votes

render(){
    if(this.state.signedIn)
        {
        return(
            
            <div className="myLibrary" data-testid='myLibrary'>
                <Sidebar />
                <Navbar isLoggedIn={true} />
                <div className="upperContainer" >
                    <div  className = "library-links" data-testid='linkContainer'>
                        <Link to={'/collection/albums'} data-testid='albumLink'> ALBUMS </Link>
                        <Link to={'/collection/playlists'} data-testid='playlistLink'> PLAYLISTS </Link>
                    </div>
                   
                </div>
                    <Switch data-testid='links'>
                            <Route path='/collection/albums' component={Albums} data-testid='Albums'/>
                            <Route path='/collection/playlists' component={Playlists} data-testid='playlists'/>
                    </Switch>
            </div>
        );
        }
}

Source File: App.js From Souq.Cat with MIT License

6 votes

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Nav />
        <div className="container">
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/products" component={Products} exact />
            <Route path="/products/:id" component={Product} />
            <Route path="/cart" component={Cart} />
          </Switch>
        </div>
      </Router>
    </Provider>
  );
}

Source File: App.js From CRUD-practice with MIT License

6 votes

export default function App() {

  return (
    <div className="App">
      <Header />
      <Switch>
        {/* Build out a Private Route */}
        <Route exact path="/login" component={Login} />
      </Switch>
    </div>
  );
}

Source File: App.js From Realtime-Chat-Application-ReactJs with MIT License

6 votes

function App() {
  return (
    <div style={{ fontFamily: "Avenir" }}>
      <Router>
        <AuthProvider>
          <Switch>
            <Route path="/chats" component={Chats} />
            <Route path="/" component={Login} />
          </Switch>
        </AuthProvider>
      </Router>
    </div>
  );
}

Source File: App.js From PsychHelp with MIT License

6 votes

function App() {
    return (
        <Router>
            <div className="App">
                <Switch>
                  <Route path='/' exact component={Home}></Route>
                  <Route path='/login' component={Login}></Route>
                  <Route path='/signup' component={Signup}></Route>
                  <Route path='/doctor' component={Doctor}></Route>
                  <Route path='/patient' component={Patient}></Route>
                  <Route path='/LoginDoctor' component={LoginDoctor}></Route>
                  <Route path='/LoginPatient' component={LoginPatient}></Route>
                  <Route path='/SignupDoctor' component={SignupDoctor}></Route>
                  <Route path='/SignupPatient' component={SignupPatient}></Route>


                </Switch>



            </div>
        </Router>
    );
}

Source File: App.js From algosearch with Apache License 2.0

6 votes

function App() {
  return (
    <div className="App">
      <Router>
        <Route component={scrollRestoration} />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/address/:address" component={props => <Address {...props} key={Math.ceil(Math.random() * 10)}/>} />
          <Route path="/addresstx/:address" component={AddressTransaction} />
          <Route path="/blocks" exact component={Blocks} />
          <Route path="/block/:blocknum" component={props => <Block {...props} key={Math.ceil(Math.random() * 10)}/>} />
          <Route path="/transactions" exact component={Transactions} />
          <Route path="/tx/:txid" component={Transaction} />
          <Route path="/dev" exact component={Dev} />
          <Route path="/404" exact component={FourOhFour} />
          <Route component={Home} />
        </Switch>
      </Router>
    </div>
  );
}

Source File: App.js From weve with Apache License 2.0

6 votes

render() {
    return (
      <div className="App">
        <Store.Container>
          <Router>
            <Switch>
              {/* / Path is dynamically changed depending on authenticated status */}
              <Route path="/:location/:id" component={this.state.isAuthenticated ? Mail : Home} />
              {/* Default fall-back path is dynamically changed depending on authenticated status */}
              <Route component={this.state.isAuthenticated ? Mail : Home} />
            </Switch>
          </Router>
        </Store.Container>
      </div>
    );
  }

Source File: App.js From TrelloClone with MIT License

6 votes

App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Alert />
          <Switch>
            <Route exact path='/' component={Landing} />
            <Route exact path='/register' component={Register} />
            <Route exact path='/login' component={Login} />
            <Route exact path='/dashboard' component={Dashboard} />
            <Route exact path='/board/:id' component={Board} />
          </Switch>
        </Fragment>
      </Router>
    </Provider>
  );
}

Source File: routes.js From viade_es2a with BSD 2-Clause "Simplified" License

6 votes

Routes = () => (
  <Router>
    <Fragment>
      <Switch>
        <NotLoggedInLayout component={Login} path="/login" exact />
        <NotLoggedInLayout component={Register} path="/register" exact />
        <NotLoggedInLayout path="/register/success" component={RegistrationSuccess} exact />
        <PublicLayout path="/404" component={PageNotFound} exact />
        <Redirect from="/" to="/feed" exact />
        <PrivateLayout path="/" routes={privateRoutes} />
        <Redirect to="/404" />
      </Switch>
    </Fragment>
  </Router>
)

Source File: Main.jsx From react_53 with MIT License

6 votes

function Main() {
  return (
    <main className={styles.main}>
      <Switch>
        {routes.map((item) => (
          <Route key={item.url} exact={!!item.exact} path={`/${item.url}`}>
            {item.component}
          </Route>
        ))}
      </Switch>
    </main>
  );

  // return (
  //   <main className={classes.main}>
  //     <Switch>
  //       <Route exact path="/">
  //         <KanbanBoard />
  //       </Route>
  //       <Route path="/about">
  //         <About text="About" />
  //       </Route>
  //       <Route path="/users">
  //         <Users />
  //       </Route>
  //     </Switch>
  //   </main>
  // );
}

Source File: App.js From Music-Hoster-FrontEnd-Using-React with MIT License

6 votes

function App() {
  return (
    <>
    <div className="App">
      <Router>
        <Navbar />

        <Switch>
          <Route path="/login" component={Login}/>
          <Route path="/Signup" component={Signup} />
          <Route path="/" component={Home} />
        </Switch>
      </Router>
     
    </div>
    <Footer/>
    </>
  );
  
}

Source File: index.js From fhir-app-starter with MIT License

6 votes

render() {
    const { error, smart, patient } = this.props;
    return (
      <Router history={history}>
        <Helmet />
        <Container style={{ marginTop: '2rem' }}>
          <Grid columns="1" stackable>
            <Grid.Column>
              {error ? <ErrorMessage {...error} /> : null}
              {patient ? <SuccessMessage patient={patient} user={smart.user} /> : null}
              <Grid.Row>
                <Header as="h1">FHIR App Starter</Header>
                <Divider />
              </Grid.Row>

              <Grid.Row>
                <Information />
              </Grid.Row>

              <Grid.Row>
                <Divider />
              </Grid.Row>

              {smart ? (
                <Switch>
                  <Route path="/" exact component={Home} />
                </Switch>
              ) : null}
            </Grid.Column>
          </Grid>
        </Container>
      </Router>
    );
  }

Source File: App.js From real-time-web-samples with MIT License

6 votes

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin">
          <NoticeForm />
        </Route>
        <Route path="/">
          <Container fluid="true" className="mt-5 pt-2">
            <Row>
              <Col md="8" className="mb-3">
                  <VideoPart />
              </Col>
              <Col md="4">
                  <ChartPart />
              </Col>
            </Row>
          </Container>
        </Route>
      </Switch>
    </Router>
  );
}

Source File: routes.js From Changes with MIT License

6 votes

render() {
    const {isLoggedIn} = this.props

    return (
      <Switch>
        {/* Routes placed here are available to all visitors */}
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        {isLoggedIn && (
          <Switch>
            {/* Routes placed here are only available after logging in */}
            <Route path="/home" component={UserHome} />
          </Switch>
        )}
        {/* Displays our Login component as a fallback */}
        <Route component={Login} />
      </Switch>
    )
  }

Source File: App.js From connect-4-online-multiplayer with MIT License

6 votes

function App() {
  const user = useContext(UserContext);

  if (!user.id) {
    return <Login />;
  }

  return (
    <SocketProvider id={user.id}>
      <NavBar />
      <Switch>
        <Route path="/" exact>
          <Rooms />
        </Route>
        <Route path="/game">
          <Box py={4}>
            <Game />
          </Box>
        </Route>
      </Switch>
    </SocketProvider>
  );
}

Source File: App.js From neighborhood-chef-fe with MIT License

6 votes

function App() {
  return (
    <div className="app-container">
      <Switch>
        <Route path="/login-redirect-url" component={LoginRedirect} />
        <Route
          path="/generic-redirect/:redirect_path"
          component={GenericRedirect}
        />
        <Route exact path="/" component={Login} />
        <Route
          path="/initialChangePassword/:string"
          component={ChangePassword}
        />
        <PrivateRoute path="/dashboard" component={GridStructure} />
        <Route path="/login" component={Login} />
        <PrivateRoute path="/create-event" component={GridStructure} />
        <PrivateRoute path="/view-events" component={GridStructure} />
        <Route path="/register" component={Register} />
        <Route path="/settings" component={Settings} />
        <Route path="/recipes" component={Recipes} />
        <Route path="/notifications" component={Notifications} />
        <Route path="/messages" component={Messages} />
        <Route path="/grid" component={GridStructure} />
        <PrivateRoute path="/events/:id" component={GridStructure} />
        <Route path="/register-check-email" component={CheckEmail} />
        <Route path="/community" component={Community} />
        <Route path="/about" component={AboutUs} />
      </Switch>
    </div>
  );
}

Source File: App.js From quake-fe with MIT License

6 votes

function App() {
  ReactGA.initialize("UA-169193629-1"); //this is our unique ga id
  ReactGA.pageview(window.location.pathname + window.location.search);
  const [darkMode] = useDarkMode(false);

  useEffect(() => {
    if (darkMode) document.body.classList.add("dark-mode");
    else document.body.classList.remove("dark-mode");
  });

  return (
    <Provider store={store}>
      <Router>
        <div className="App">
          <Header />

          <MediaQuery minWidth={800}>
            <FeedContainer />
          </MediaQuery>

          <Switch>
            <Route exact path="/" component={Activity} />
            <Route exact path="/activity" component={Activity} />

            <Route exact path="/feed" component={FeedContainer} />

            <Route exact path="/about" component={About} />
            <Route exact path="/resources" component={Resources} />
            <Route exact path="/report" component={BugReport} />
            <Route exact path="/sms" component={Sms} />
          </Switch>

          <Navigation />
        </div>
      </Router>
    </Provider>
  );
}

Source File: App.js From resumeker-fe with MIT License

6 votes

function App(props) {
  // const { user } = useAuth0();

  const token = useGetToken();

  localStorage.setItem("token", token);

  return (
    <div className="App">
      <Navbar />
      <h1>Resumeker</h1>
      <Switch>
        {/* <Route path="/register" render={(props) => <Profile />} /> */}
        <Route exact path="/" component={Home} />
        <Route path="/about" component={AboutUs} />
        <Route
          path="/profile"
          component={() => <ProtectedRoute Component={Profile} />}
        />
        <Route
          path="/form"
          component={() => <ProtectedRoute Component={MasterForm} />}
        />
      </Switch>
    </div>
  );
}

Source File: Auth.js From schematic-capture-fe with MIT License

6 votes

Auth = () => {
  return (
    <AuthContainer>
      <GlobalStyle />
      <Container>
        <PageTitle>Schematic Capture</PageTitle>
        <Switch>
          <Route path="/forgotpassword" component={ForgotPassword} />
          <Route exact path="/" component={Login} />
        </Switch>
      </Container>
      <Footer />
    </AuthContainer>
  )
}

Source File: App.js From social-media-strategy-fe with MIT License

6 votes

function App(props) {
  initializeAnalytics();
  const { authService } = useOktaAuth();
  const dispatch = useDispatch();
  const history = useHistory();
  const location = useLocation();
  const user = useSelector((state) => state.user);

  useEffect(() => {
    if (location.pathname === "/connect/twitter/callback") return;
    if (!user.initialized) {
      dispatch(initializeUser(authService, history));
      return;
    }
    // eslint-disable-next-line
  }, [user, location]);

  return (
    <Switch>
      <Route exact path="/login" component={LoginOkta} />
      <Route path="/implicit/callback" component={LoginCallback} />
      <Route>
        <NavMenuTemplate>
          <SecureRoute path="/home" component={Home} />
          <SecureRoute path="/analytics" component={Analytics} />
          <SecureRoute path="/connect" component={ConnectAccounts} />
        </NavMenuTemplate>
      </Route>
    </Switch>
  );
}

Source File: TopNav.jsx From trashpanda-fe with MIT License

6 votes

TopNav = ({ theme, toggleTheme, setShutterPress, shutterPress }) => {
  const history = useHistory();

  const handleBackClick = () => {
    history.goBack();
  };

  const handleCameraBackClick = () => {
    shutterPress ? setShutterPress(false) : history.goBack();
  };

  const handleHome = () => {
    setShutterPress(false);
    history.push("/");
  };

  return (
    <NavBar>
      <Switch>
        <Route exact path="/">
          <Title>Trash Panda</Title>
          <Toggle theme={theme} toggleTheme={toggleTheme} />
        </Route>

        <Route exact path="/camera">
          <BackArrowIcon onClick={handleCameraBackClick} />
          <HomeIcon onClick={handleHome} />
        </Route>

        <Route>
          <BackArrowIcon theme={theme} onClick={handleBackClick} />
          <HomeIcon theme={theme} onClick={handleHome} />
        </Route>
      </Switch>
    </NavBar>
  );
}

Source File: App.js From create-sas-app with Apache License 2.0

6 votes

render() {
		return (
			<div className="App">
				<Header/>
				<div className={'main'}>
					{/*<Sidebar/>*/}
					<div className={'mainContainer'}>
						<Switch>
							<Route exact path='/' component={Home}/>
							<Route path='/error' component={Page500}/>
							<Route exact path='/applicationLogs' component={ApplicationLogs}/>
							<Route exact path='/errorLogs' component={ErrorLogs}/>
							<Route exact path='/failedRequests' component={FailedRequests}/>
							<Route exact path='/debugLogs' component={DebugLogs}/>
							<Route component={Page404}/>
						</Switch>
					</div>
				</div>
				<Footer/>
				<Portal>
					<LoginModal/>
				</Portal>
			</div>
		);
	}

Source File: AppRoutes.js From Purple-React with MIT License

6 votes

render () {
    return (
      <Suspense fallback={<Spinner/>}>
        <Switch>
          <Route exact path="/dashboard" component={ Dashboard } />


          <Route path="/basic-ui/buttons" component={ Buttons } />
          <Route path="/basic-ui/dropdowns" component={ Dropdowns } />
          <Route path="/basic-ui/typography" component={ Typography } />


          <Route path="/form-Elements/basic-elements" component={ BasicElements } />

          <Route path="/tables/basic-table" component={ BasicTable } />


          <Route path="/icons/mdi" component={ Mdi } />


          <Route path="/charts/chart-js" component={ ChartJs } />


          <Route path="/user-pages/login-1" component={ Login } />
          <Route path="/user-pages/register-1" component={ Register1 } />
          <Route path="/user-pages/lockscreen" component={ Lockscreen } />

          <Route path="/error-pages/error-404" component={ Error404 } />
          <Route path="/error-pages/error-500" component={ Error500 } />

          <Route path="/general-pages/blank-page" component={ BlankPage } />


          <Redirect to="/dashboard" />
        </Switch>
      </Suspense>
    );
  }

Source File: App.js From NFT-Marketplace with MIT License

6 votes

function App() {
  return (
    <div className="App">
      <Router>
        <Header />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/create-nft" component={CreateNFT} />
          <Route path="/nft/:nftId" component={Item} />
          <Route>404 Not Found!</Route>
        </Switch>
      </Router>
    </div>
  );
}

Source File: App.jsx From genshin with MIT License

6 votes

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/guides" component={Guides} />
          <Route path="/guides/debutant" component={GuideDebutant} />
          <Route path="/guides/abyss" component={GuideAbyss} />
          <Route path="/dailies" component={Dailies} />
          <Route exact path="/indispensables" component={Indispensables} />
          <Route path="/indispensables/reactions" component={Reactions} />
          <Route path="/news" component={News} />
          <Route path="/article/:slug" component={ArticlePage} />
          <Route path="*" component={NotFound} />
        </Switch>
      </Router>
    </Provider>
  );
}

Source File: App.js From coup-online with MIT License

6 votes

function App() {

  return (
    <div className="App">
      <Router>
        <div>
          <Switch>
            <Route path="/create">
              <CreateGame></CreateGame>
            </Route>
            <Route path="/join">
              <JoinGame></JoinGame>
            </Route>
            <Route path="/">
              <Home></Home>
            </Route>
          </Switch>
        </div>
      </Router>
      
    </div>
  );
}

react-router-dom#Switch JavaScript Examples