react-router-dom#Routes JavaScript Examples

The following examples show how to use react-router-dom#Routes. 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: App.js    From js-code with ISC License 6 votes vote down vote up 
function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Dashboard></Dashboard>}></Route>
                <Route path='/login' element={<Login></Login>}></Route>
                <Route path='*' element={<Error></Error>}></Route>
            </Routes>
        </BrowserRouter>
    );
}
Example #2
Source File: index.js    From conectadev with MIT License 6 votes vote down vote up 
function Home() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Header />
      <div className={classes.toolbar} />
      <main className={classes.main}>
        <Routes>
          <Route path="/" element={<Feed />} />
          <Route path="/:username" element={<Profile />} />
          <Route path="/feed" element={<Feed />} />
          <Route path="/post/new" element={<NewPost />} />
          <Route path="/post/:slug" element={<Post />} />
          <Route path="*" element={<h1>404!</h1>} />
        </Routes>
      </main>
    </div>
  );
}
Example #3
Source File: index.js    From caricovidsite with MIT License 6 votes vote down vote up 
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route
          path="credits"
          element={<Credits />}
        />
        <Route path="graphs" element={<GraphPage />} />
        <Route path="vaccination" element={<VaccinePage />} />
        <Route path="deaths" element={<DeathsPage />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  rootElement
);
Example #4
Source File: index.js    From astra-tik-tok with Apache License 2.0 6 votes vote down vote up 
App = () => {
  
  return (
    <BrowserRouter>
      <Header />
    <Routes>
      <Route path= "/upload" element={<Upload />}/>
      <Route path= "/" element={<Home />}/>
    </Routes>
  </BrowserRouter>
  )
}
Example #5
Source File: App.js    From serverless-media-portal with MIT License 6 votes vote down vote up 
export default function App() {
	return (
		<AuthWrapper>
			<ToastProvider>
				<Router basename={process.env.PUBLIC_URL}>
					<Layout>
						<Routes>
							<Route path="/" exact element={<Browse />} />
							<Route path="/watch/:videoHash" exact element={<Watch />} />
							<Route path="/upload" exact element={<Upload />} />
							<Route path="/settings" exact element={<Settings />} />
						</Routes>
					</Layout>
				</Router>
			</ToastProvider>
		</AuthWrapper>
	);
}
Example #6
Source File: App.js    From cypress-audit with MIT License 6 votes vote down vote up 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index path="/" element={<Index />} />
        <Route element={<Dashboard />} path="dashboard" />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}
Example #7
Source File: bootstrap.jsx    From module-federation-examples with MIT License 6 votes vote down vote up 
// createRoot(container!) if you use TypeScript
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
);
Example #8
Source File: Shell.js    From module-federation-examples with MIT License 6 votes vote down vote up 
export default function Shell() {
  const drawer = useDrawer();

  return (
    <ServiceProvider>
      <BrowserRouter>
        <Viewport>
          <Box display="flex" flex={1}>
            <AppBar drawer={drawer} />
            <AppDrawer drawer={drawer} />
            <React.Suspense fallback={'Loading'}>
              <Routes>
                <Route path="dashboard/*" element={<DashboardService />} />
                <Route path="orders/*" element={<OrderService />} />
                <Route path="profile/*" element={<ProfilePage />} />
                <Route path="*" element={<Navigate to="/dashboard" replace />} />
              </Routes>
            </React.Suspense>
          </Box>
        </Viewport>
      </BrowserRouter>
    </ServiceProvider>
  );
}
Example #9
Source File: PageRoutes.js    From minihackathon-2022 with MIT License 6 votes vote down vote up 
PageRoutes = () => {
	return (
		<div>
			<BrowserRouter>
				<Routes>
					<Route
						path="/awareness-session/register"
						element={<AwarenessSession />}
					/>
					<Route path="/team/register" element={<Register />} />
					<Route path="/" element={<Home />} />
				</Routes>
			</BrowserRouter>
		</div>
	);
}
Example #10
Source File: App.js    From Google-Photos-Clone with MIT License 6 votes vote down vote up 
function App() {
  const user = useSelector((state) => state.user);

  return (
    <div className="app">
      <Router>
        {user ? (
          <>
            <Nav />
            <Routes>
              <Route exact path="/" element={<HomePage />} />
              <Route exact path="/album/:albumName" element={<AlbumPage />} />
            </Routes>
          </>
        ) : (
          <Login />
        )}
      </Router>
    </div>
  );
}
Example #11
Source File: index.js    From react-spa-template with MIT License 6 votes vote down vote up 
export default function AppRouter() {
  return (
    <Suspense fallback={<div />}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="*" element={<ErrorPage status={404} message="Page not found." />} />
      </Routes>
    </Suspense>
  );
}
Example #12
Source File: App.js    From os-league-tools with MIT License 6 votes vote down vote up 
export default function App() {
    useEffect(() => {
        ReactGA.pageview(window.location.pathname + window.location.search);
    }, []);

    return (
        <Provider store={store}>
            <ThemeProvider>
                <div className='App'>
                    <BrowserRouter basename='/'>
                        <Auth0Provider
                            domain='login.osleague.tools'
                            clientId='yfqwKEhQO8FL7MlxWmWo7ekuGgzSrfmh'
                            redirectUri={window.location.origin}
                        >
                            <Routes>
                                <Route path='/' element={<Homepage />} />
                                <Route path='stats' element={<Statistics />} />
                                <Route path='news' element={<Homepage />} />
                                <Route path='tracker' element={<Tracker />} />
                                <Route path='calculators' element={<Calculators />}>
                                    <Route path=':skill' element={<Calculators />} />
                                </Route>
                                <Route path='planners' element={<Calculators />}>
                                    <Route path=':skill' element={<Calculators />} />
                                </Route>
                                <Route path='about' element={<About />} />
                                <Route path='settings' element={<Settings />} />
                            </Routes>
                        </Auth0Provider>
                    </BrowserRouter>
                </div>
            </ThemeProvider>
        </Provider>
    );
}
Example #13
Source File: app.js    From space-rockets-challenge with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <div>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/launches" element={<Launches />} />
        <Route path="/launches/:launchId" element={<Launch />} />
        <Route path="/launch-pads" element={<LaunchPads />} />
        <Route path="/launch-pads/:launchPadId" element={<LaunchPad />} />
      </Routes>
    </div>
  );
}
Example #14
Source File: Shell.js    From live-micro-frontends-module-federation-2021-03-18 with MIT License 6 votes vote down vote up 
Shell = () => (
  <ServiceProvider>
    <BrowserRouter>
      <AppBar />
      <div className="container mt-24">
        <React.Suspense fallback={"Loading"}>
          <Routes>
            <Route path="list/*" element={<ProductList />} />
            <Route path="detail/*" element={<ProductDetails />} />
            <Route path="*" element={<Navigate to="/list" replace />} />
          </Routes>
        </React.Suspense>
      </div>
    </BrowserRouter>
  </ServiceProvider>
)
Example #15
Source File: Shell.js    From live-micro-frontends-module-federation-2021-03-18 with MIT License 6 votes vote down vote up 
Shell = () => (
  <ServiceProvider>
    <BrowserRouter>
      <AppBar />
      <div className="container mt-24">
        <React.Suspense fallback={"Loading"}>
          <Routes>
            <Route path="list/*" element={<ProductList />} />
            <Route path="detail/*" element={<ProductDetails />} />
            <Route path="*" element={<Navigate to="/list" replace />} />
          </Routes>
        </React.Suspense>
      </div>
    </BrowserRouter>
  </ServiceProvider>
)
Example #16
Source File: App.js    From pro-organiser-application with MIT License 6 votes vote down vote up 
function App() {
  return (
    <AuthProvider>
      <Router>
        <Header />
        <Routes>
          <Route
            exact
            path="/"
            element={
              <PrivateRoute>
                <Home />
              </PrivateRoute>
            }
          />
          <Route
            path="/createboard"
            element={
              <PrivateRoute>
                <AddBoard />
              </PrivateRoute>
            }
          />
          <Route
            path="/board/:name"
            element={
              <PrivateRoute>
                <Board />
              </PrivateRoute>
            }
          />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}
Example #17
Source File: AnimatedRoutes.jsx    From ResoBin with MIT License 6 votes vote down vote up 
AnimatedRoutes = ({ children }) => {
  const location = useLocation()

  return (
    <TransitionGroup component={null}>
      <CSSTransition key={location.pathname} classNames="page" timeout={200}>
        <Section>
          <Routes location={location}>{children}</Routes>
        </Section>
      </CSSTransition>
    </TransitionGroup>
  )
}
Example #18
Source File: routes.jsx    From ResoBin with MIT License 6 votes vote down vote up 
AppRoutes = () => (
  <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/privacy-policy" element={<Privacy />} />
    <Route path="/terms-and-conditions" element={<Terms />} />
    <Route
      path="*"
      element={<PrivateRoute component={Dashboard} redirectTo="/login" />}
    />
  </Routes>
)
Example #19
Source File: index.jsx    From amazon-ivs-feed-web-demo with MIT No Attribution 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <MobileBreakpointProvider>
        <StreamProvider>
          <Routes>
            <Route path="/" element={<Navigate replace to="/0" />} />
            <Route path="/:id" element={<App />} />
          </Routes>
        </StreamProvider>
      </MobileBreakpointProvider>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #20
Source File: App.js    From ReactJS-Projects with MIT License 6 votes vote down vote up 
App = () => {
  const [user, setUser] = useState(null)

  return (
    <Router>
      <ToastContainer />
      <UserContext.Provider value={{ user, setUser }}>
        <NavBar />
        <Routes>
          <Route
            exact path="/"
            element={<Home />}
          />
          <Route
            exact path="/signin"
            element={<Signin />}
          />
          <Route
            exact path="/signup"
            element={<Signup />}
          />
          <Route
            exact path="*"
            element={<PageNotFound />}
          />
        </Routes>
        <Footer />
      </UserContext.Provider>
    </Router>
  );
}
Example #21
Source File: index.js    From ReactJS-Projects with MIT License 6 votes vote down vote up 
routing = (
  // react-router v6
  <Router>
    {/* Provide all the routes under <Route></Route> followed by a path and the corresponding component to be rendered on that path.
     Also, a default path can be provided to handle error page. */}
    <Routes>
      <Route
        path="/"
        element={<App />}
      />
      <Route
        path="/profile"
        element={<Profile />}
      />
      <Route
        path="/cart"
        element={<Cart />}
      />
      <Route
        path="*"
        element={<PageNotFound />}
      />
    </Routes>
    <div>
      <ul>
        <li><Link to="/">App</Link></li>
        <li><Link to="/profile">Profile</Link></li>
        <li><Link to="/cart">Cart</Link></li>
        <li><Link to="/other">Other</Link></li>
      </ul>
    </div>
  </Router >
)
Example #22
Source File: App.js    From gsocanalyzer with MIT License 6 votes vote down vote up 
function App() {
  const [bookmarked, setBookmarked] = useState([]);

  useEffect(() => {
    const data = localStorage.getItem('Bookmarked');
    if(data) {
      setBookmarked(JSON.parse(data));
    }
  }, [])

  useEffect(() => {
    localStorage.setItem('Bookmarked', JSON.stringify(bookmarked));
  }, [bookmarked]);

  return (
    <React.Fragment>
        <Router>
        <Routes>
          <Route path='*' element={<Home bookmarked={bookmarked} setBookmarked={setBookmarked} />} />
          <Route path='/bookmarks' element={<Bookmarked bookmarked={bookmarked} setBookmarked={setBookmarked} />} />
        </Routes>
        </Router>
    </React.Fragment>
  );
}
Example #23
Source File: App.js    From football-fantasy-exercise with Apache License 2.0 6 votes vote down vote up 
function App() {
    return (

        <BrowserRouter>
            <div className="nav-menu">
                <nav>
                    <Link to="/">Home</Link>| {" "}
                    <Link to="login">Login</Link>| {" "}
                    <Link to="teams">Teams</Link>
                </nav>
            </div>
            <hr />
            <Routes>
                <Route path="/" index element={<Home />} />
                <Route path="login" element={<Login />} />
                <Route path="teams" element={<Teams />} />
            </Routes>
        </BrowserRouter>

    );
}
Example #24
Source File: index.js    From citu-api with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #25
Source File: App.js    From conectadev with MIT License 6 votes vote down vote up 
function App() {
  const { settings } = useSettings();

  return (
    <ThemeProvider theme={createTheme(settings)}>
      <BrowserRouter>
        <Auth>
          <Routes>
            <GuestRoute path="/sign-in" element={<SignIn />} />
            <GuestRoute path="/sign-up" element={<SignUp />} />
            <Route path="//*" element={<Home />} />
          </Routes>
        </Auth>
      </BrowserRouter>
    </ThemeProvider>
  );
}
Example #26
Source File: index.js    From Learning-Redux with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <ColorProvider>
      <AddColorForm />
      <Routes>
        <Route path="/" element={<ColorList />}></Route>
        <Route path=":id" element={<ColorDetails />} />
      </Routes>
    </ColorProvider>
  );
}
Example #27
Source File: App.js    From react-sample-projects with MIT License 6 votes vote down vote up 
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router hashType="slash">
          <ChakraProvider theme={theme}>
            <NavBar />
            <Box
              textAlign="center"
              fontSize="xl"
              height="calc(100vh - 64px)"
              width="90%"
              pt={16}
              ml={'auto'}
              mr={'auto'}
            >
              <Routes>
                <Route exact path="/" element={<Home />}></Route>
                <Route
                  exact
                  path="/product/add"
                  element={<ProductAddEdit />}
                ></Route>
                <Route
                  exact
                  path="/product/:id"
                  element={<ProductDetails />}
                ></Route>
                <Route exact path="/cart" element={<Cart />}></Route>
              </Routes>
            </Box>
          </ChakraProvider>
        </Router>
      </PersistGate>
    </Provider>
  );
}
Example #28
Source File: App.js    From react-sample-projects with MIT License 6 votes vote down vote up 
export default function App() {
  const classes = useStyles();

  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <ThemeContextProvider>
        <Provider store={store}>
          <Router>
            <div className={classes.root}>
              <CssBaseline />
              <Navbar />
              <NavigationDrawer />

              <main className={classes.content}>
                <div className={classes.toolbar} />
                <Box p={2}>
                  <Routes>
                    <Route exact path="/" element={<Home />}></Route>
                    <Route
                      exact
                      path="/reminders"
                      element={<Reminders />}
                    ></Route>
                    <Route exact path="/labels" element={<Labels />}></Route>
                    <Route
                      exact
                      path="/favorites"
                      element={<Favorites />}
                    ></Route>
                  </Routes>
                </Box>
              </main>
            </div>
          </Router>
        </Provider>
      </ThemeContextProvider>
    </FirebaseAppProvider>
  );
}
Example #29
Source File: App.js    From react-sample-projects with MIT License 6 votes vote down vote up 
function App() {
  const client = new ApolloClient({
    uri: 'https://graphql-pokemon2.vercel.app/',
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <Router hashType="slash">
          <Routes>
            <Route exact path="/" element={<Home />}></Route>
            <Route
              exact
              path="/pokemon/:id"
              element={<PokemonDetail />}
            ></Route>
          </Routes>
        </Router>
      </Provider>
    </ApolloProvider>
  );
}