react-router-dom#Switch JavaScript Examples

The following examples show how to use react-router-dom#Switch. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: deck-mode.jsx    From MDXP with MIT License 6 votes vote down vote up 
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>
  );
}
Example #2
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
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>
    </>
  )
}
Example #3
Source File: App.js    From Elemento with MIT License 6 votes vote down vote up 
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>
  );
}
Example #4
Source File: library.jsx    From Oud with MIT License 6 votes vote down vote up 
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>
        );
        }
}
Example #5
Source File: App.js    From Souq.Cat with MIT License 6 votes vote down vote up 
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>
  );
}
Example #6
Source File: App.js    From CRUD-practice with MIT License 6 votes vote down vote up 
export default function App() {

  return (
    <div className="App">
      <Header />
      <Switch>
        {/* Build out a Private Route */}
        <Route exact path="/login" component={Login} />
      </Switch>
    </div>
  );
}
Example #7
Source File: App.js    From Realtime-Chat-Application-ReactJs with MIT License 6 votes vote down vote up 
function App() {
  return (
    <div style={{ fontFamily: "Avenir" }}>
      <Router>
        <AuthProvider>
          <Switch>
            <Route path="/chats" component={Chats} />
            <Route path="/" component={Login} />
          </Switch>
        </AuthProvider>
      </Router>
    </div>
  );
}
Example #8
Source File: App.js    From PsychHelp with MIT License 6 votes vote down vote up 
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>
    );
}
Example #9
Source File: App.js    From algosearch with Apache License 2.0 6 votes vote down vote up 
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>
  );
}
Example #10
Source File: App.js    From weve with Apache License 2.0 6 votes vote down vote up 
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>
    );
  }
Example #11
Source File: App.js    From TrelloClone with MIT License 6 votes vote down vote up 
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>
  );
}
Example #12
Source File: routes.js    From viade_es2a with BSD 2-Clause "Simplified" License 6 votes vote down vote up 
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>
)
Example #13
Source File: Main.jsx    From react_53 with MIT License 6 votes vote down vote up 
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>
  // );
}
Example #14
Source File: App.js    From Music-Hoster-FrontEnd-Using-React with MIT License 6 votes vote down vote up 
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/>
    </>
  );
  
}
Example #15
Source File: index.js    From fhir-app-starter with MIT License 6 votes vote down vote up 
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>
    );
  }
Example #16
Source File: App.js    From real-time-web-samples with MIT License 6 votes vote down vote up 
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>
  );
}
Example #17
Source File: routes.js    From Changes with MIT License 6 votes vote down vote up 
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>
    )
  }
Example #18
Source File: App.js    From connect-4-online-multiplayer with MIT License 6 votes vote down vote up 
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>
  );
}
Example #19
Source File: App.js    From neighborhood-chef-fe with MIT License 6 votes vote down vote up 
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>
  );
}
Example #20
Source File: App.js    From quake-fe with MIT License 6 votes vote down vote up 
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>
  );
}
Example #21
Source File: App.js    From resumeker-fe with MIT License 6 votes vote down vote up 
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>
  );
}
Example #22
Source File: Auth.js    From schematic-capture-fe with MIT License 6 votes vote down vote up 
Auth = () => {
  return (
    <AuthContainer>
      <GlobalStyle />
      <Container>
        <PageTitle>Schematic Capture</PageTitle>
        <Switch>
          <Route path="/forgotpassword" component={ForgotPassword} />
          <Route exact path="/" component={Login} />
        </Switch>
      </Container>
      <Footer />
    </AuthContainer>
  )
}
Example #23
Source File: App.js    From social-media-strategy-fe with MIT License 6 votes vote down vote up 
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>
  );
}
Example #24
Source File: TopNav.jsx    From trashpanda-fe with MIT License 6 votes vote down vote up 
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>
  );
}
Example #25
Source File: App.js    From create-sas-app with Apache License 2.0 6 votes vote down vote up 
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>
		);
	}
Example #26
Source File: AppRoutes.js    From Purple-React with MIT License 6 votes vote down vote up 
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>
    );
  }
Example #27
Source File: App.js    From NFT-Marketplace with MIT License 6 votes vote down vote up 
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>
  );
}
Example #28
Source File: App.jsx    From genshin with MIT License 6 votes vote down vote up 
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>
  );
}
Example #29
Source File: App.js    From coup-online with MIT License 6 votes vote down vote up 
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>
  );
}