react-router-dom#Router JavaScript Examples

//creating reset
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <DarkThemeProvider>
        <App />
      </DarkThemeProvider>
    </Router>
  </Provider>,
  document.querySelector("#root")
);

TestingRouter = ({ ComponentWithRedirection, redirectUrl }) => (
  <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
    <Router history={history}>
      <Route
        path="/"
        exact={true}
        render={() => <ComponentWithRedirection />}
      />
      <Route
        path={redirectUrl}
        exact={true}
        render={() => <div>{redirectUrl}</div>}
      />
    </Router>
  </IntlProvider>
)

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>
    );
  }

render() {
        return (
            <Router history={history}>
                <React.Fragment>
                    <Hud />
                    <Phone />
                    <Documents/>
                    <PoliceCerf/>
                    <SpeedoMeter/>
                    <FibCerf/>
                    <SheriffCerf/>
                    <PoliceTablet/>
                    <MedTablet/>
                    <MedicCerf/>
                    <Inventory/>
                    <PlayerMenu/>
                    <BuyCar/>
                </React.Fragment>
            </Router>
        );
    }

test("Should Render the request Card component", () => {
    const div = document.createElement("div");
    const Wrapper = ReactDOM.render(
        <Provider store={store}>
            <Router history={customHistory}>
                <RideRequests>
                    <RideRequestsCard />
                </RideRequests>
            </Router>
        </Provider>,
        div
    );
    expect(Wrapper).toBeNull();
});

describe("Login/Register route to correct forms", () => {
  test("Register button routes to RegisterForm", async () => {
    const history = createMemoryHistory();

    const { container, getByText } = renderRedux(
      <Router history={history}>
        <LandingPage />
      </Router>,
      {
        initialReducerState: {},
      }
    );

    expect(container.innerHTML).toMatch("Get help with your grant today!");
    fireEvent.click(getByText(/register/i));
    expect(history.location.pathname).toBe("/RegisterForm");
  });
  test("Login button routes to LoginForm", () => {
    const history = createMemoryHistory();

    const { container, getByText } = renderRedux(
      <Router history={history}>
        <LandingPage />
      </Router>,
      {
        initialReducerState: {},
      }
    );

    expect(container.innerHTML).toMatch("Get help with your grant today!");
    fireEvent.click(getByText(/login/i));
    expect(history.location.pathname).toBe("/LoginForm");
  });
});

describe('Buyer info', () => {
  test('should render the main wrapper for orderContentsCard', () => {
    const { getByTestId } = render(<OrderContentsCards />);
    expect(getByTestId('orderContentsCardsWrapper')).toBeVisible();
  });
  test('should render the main wrapper for OrderContents', () => {
    const { getByTestId } = render(<OrderContents />);
    expect(getByTestId('orderContentsWrapper')).toBeVisible();
  });

  test('should render the product card', () => {
    const { rerender, getByText } = render(
      <Router history={history}>
        <ProductCard
          inventory={{
            images: [
              'https://res.cloudinary.com/dnsl4nbz4/image/upload/v1592612280/Products/tkb1s2rqc7qwapdhdcde.png',
            ],
            price: 55,
            productId: '5eed55c1028759000473c85b',
            productName: 'Bike',
            quantity: 1,
          }}
        />
      </Router>
    );
  });
});

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <GlobalFonts />
      <ThemeProvider theme={theme}>
        <Suspense fallback={<div>Carregando...</div>}>
          <App />
        </Suspense>
      </ThemeProvider>
    </Router>
  </Provider>,
  document.getElementById("root")
);

function App() {

  // Retrieving data from an AJAX request.
  // Remember that the function passed to useEffect will run,
  // after render is fixed on the screen.
  // See https://reactjs.org/docs/hooks-reference.html#useeffect
  useEffect(() => {
  });

  
  return (
    <Router history={browserHistory}>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <Master />
          <Routes />
          <AppSnackbar />
          <DialogInfo />
        </ThemeProvider>
      </Provider>
    </Router>
  );
}

test('renders Home Page', () => {
  const history = createMemoryHistory();
  history.push('/');

  const { getByText } = render(
    <Router history={history}>
      <App />
    </Router>
  );

  expect(getByText(/Delayed justice is injustice/i)).toBeInTheDocument();
});

render(
  <Provider store={store}>
    <Router history={history}>
      <Suspense
        fallback={
          <div style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          >
            <CircularProgress
              sx={{
                color: layoutConfig.colorPalette.primary.main
              }}
              thickness={5}
            />
          </div>
          }
      >
        <App />
      </Suspense>
    </Router>
    <ReduxToastr
      timeOut={0}
      newestOnTop={false}
      preventDuplicates
      position='top-center'
      transitionIn='fadeIn'
      transitionOut='fadeOut'
    />
  </Provider>,
  document.getElementById('root')
)

render() {
        const { quantity } = this.state;

        const PrivateRoute = ({ component: Component, ...rest }) => (
            <Route {...rest} render={(props) => (
                this.props.userInfo.loggedIn === true
                    ? <Component {...props} {...rest} />
                    : <Redirect to='/' />
            )} />
        )

        return (
            <div className="App">
                <Router history={history}>
                    <Fragment>
                        <DebugHeader />
                        <Header quantity={quantity} />
                        <Route exact path="/" component={Home} />
                        <Route exact path="/list" component={List} />
                        <Route exact path="/list/:code" component={List} />
                        <Route path="/suggested-products-list" component={SuggestedProductsList} />
                        <Route path="/product/detail/:productId" render={(props) => <Detail sumProductInState={this.sumProductInState} {...props} />} />
                        <PrivateRoute path='/coupons' component={MyCoupons} />
                        <PrivateRoute path='/profile' component={Profile} />
                        <PrivateRoute path='/shopping-cart' component={ShoppingCart} ShoppingCart={this.ShoppingCart} quantity={this.state.quantity} />
                        <Footer />
                    </Fragment>
                </Router>
            </div>
        );
    }

ReactDOM.render(
  <Provider store={store}>
    <React.Fragment>
      <Router history={history}>
        <App />
      </Router>
    </React.Fragment>
  </Provider>,
  document.getElementById('root')
);

render() {
        return (
            <Router history={history}>
                {/* nav */}
                <div className="container text-center">
                    <Link to="/" className="btn btn-link">Single Alert</Link>
                    <Link to="/multi-alerts" className="btn btn-link">Multiple Alerts</Link>
                </div>

                {/* main app container */}
                <div className="jumbotron p-4">
                    <div className="container text-center">
                        <Alert />
                        <Route exact path="/" component={Home} />
                        <Route path="/multi-alerts" component={MultiAlerts} />
                    </div>
                </div>
            </Router>
        );
    }

function App() {
    const alert = useSelector(state => state.alert);
    const dispatch = useDispatch();

    useEffect(() => {
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }, []);

    return (
        <div className="jumbotron">
            <div className="container">
                <div className="col-md-8 offset-md-2">
                    {alert.message &&
                        <div className={`alert ${alert.type}`}>{alert.message}</div>
                    }
                    <Router history={history}>
                        <Switch>
                            <PrivateRoute exact path="/" component={HomePage} />
                            <Route path="/login" component={LoginPage} />
                            <Route path="/register" component={RegisterPage} />
                            <Redirect from="*" to="/" />
                        </Switch>
                    </Router>
                </div>
            </div>
        </div>
    );
}

function App() {
    return (
        <div className="app-container bg-light">
            <Router history={history}>
                <Nav />
                <div className="container pt-4 pb-4">
                    <Switch>
                        <PrivateRoute exact path="/" component={Home} />
                        <Route path="/login" component={Login} />
                        <Redirect from="*" to="/" />
                    </Switch>
                </div>
            </Router>
        </div>
    );
}

function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CssBaseline />
      <Sidebar>
        <SidebarItem label="Home" icon={HomeIcon} link="/" />
        <SidebarItem label="Settings" icon={SettingsIcon}>
          <SidebarItem label="Metrics" link="/metrics" />
          <SidebarItem label="Add Data" link="/add-data" />
          <SidebarItem label="Generate Data" link="/generate-data" />
        </SidebarItem>
      </Sidebar>
      <Router history={history}>
        <Suspense fallback={<div />}>
          <Switch>
            <Route path="/" exact={true} component={Home} />
            <Route path="/metrics" exact={true} component={Metrics} />
            <Route path="/add-data" exact={true} component={AddData} />
            <Route path="/generate-data" exact={true} component={GenerateData} />
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}

// You can apply multiple middleware.


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

ReactDOM.render(
    <Router history={hist}>
      <Switch>
        <Route path="/admin" component={Admin} />
        <Route path="/login" component={Login} />
        <Redirect from="/" to="/admin/dashboard" />
      </Switch>
    </Router>,
    document.getElementById('root'),
);

function App() {
  const [theme, setTheme] = useState('reply');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <ThemeProvider>
        <Router history={history}>
          <Routes />
        </Router>
      </ThemeProvider>
    </ThemeContext.Provider>
  );
}

export default function App(props) {
  return (
    <AuthProvider>
      <UserProvider>
        <ThemeProvider theme={theme}>
            <Router history={browserHistory}>
              <Routes />
            </Router>
        </ThemeProvider>
      </UserProvider>
    </AuthProvider>
  );
}

global.renderWithRouter = function renderWithRouter(
  ui,
  {
    route = "/",
    history = createMemoryHistory({ initialEntries: [route] })
  } = {}
) {
  return {
    ...render(<Router history={history}>{ui}</Router>),
    history
  };
};

ReactDOM.render(
  <Router history={hist} baseName={baseURL}>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route path={prop.path} component={prop.component} key={key} />;
      })}
    </Switch>
  </Router>,
  document.getElementById("root")
);

App = ()=>{
  return (
    <Router history={history}>
        <React.Suspense fallback={loading}>
          <Routes />
        </React.Suspense>
    </Router>
  );
}

//打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
ReactDOM.render(
  <Router history={history}>
    <LocaleProvider locale={zh_CN}>
      <Provider {...store}>
        <App />
      </Provider>
    </LocaleProvider>
  </Router>,
  document.getElementById('root')
);

describe('Social links tests', () => {
  const history = createMemoryHistory();
  let wrapper;

  beforeEach(() => {
    wrapper = render(
      <Router history={history}>
        <SocialLinks {...props} />
      </Router>
    );
  });

  afterEach(() => {
    wrapper = null;
  });

  it('should render social links', () => {
    expect(wrapper).toBeDefined();
  });

  it('should render title', () => {
    const title = wrapper.getByTestId('title');
    expect(title).toBeInTheDocument();
  });
});

function App(props) {
  const {
    user,
    signOut,
    signInWithGoogle,
    signInWithEmailAndPassword,
    createUserWithEmailAndPassword,
  } = props;

  const auth = {
    user,
    accessToken: user ? user.toJSON().stsTokenManager.accessToken : null,
    methods: {
      signOut,
      signInWithGoogle,
      signInWithEmailAndPassword,
      createUserWithEmailAndPassword,
    },
  };

  console.log(auth);

  return (
    <AuthProvider value={auth}>
      <Router history={hist}> 
        <Switch>
          <Route exact path="/dashboard" component={Dashboard} />
          <Route exact path="/" component={LoginPage} />
          <Route exact path="/add-actor" component={AddActor} />
          <Route exact path="/search-page" component={SearchPage} />
          <Route exact path="/registration-page" component={RegistrationPage} />
        </Switch>
       </Router>       
    </AuthProvider>
  );
}

App = () => {
    return (
        <Router history={history}>
            <Switch>
                <Route exact path='/SimpleWeather'>
                    <SearchPage/>
                </Route>
                <Route exact path='/SimpleWeather/cities'>
                    <CitiesPage/>
                </Route>
                <Route exact path='/SimpleWeather/cities/:city'>
                    <CityPage/>
                </Route>
                <Route exact path='/SimpleWeather/forecast'>
                    <ForecastPage/>
                </Route>
                <Redirect to='/SimpleWeather'/>
            </Switch>
        </Router>
    );
}

App = () => {
  const [storeLoaded, setStoreLoaded] = useState(false)

  useEffect(() => {
    const hydrate = create()
    async function hydrateStore() {
      await hydrate('userStore', stores.userStore)
      await hydrate('chatStore', stores.chatStore)
      await hydrate('luckyStore', stores.luckyStore)
    }
    hydrateStore().then(() => setStoreLoaded(true))
  }, [])

  return (
    <Provider {...stores}>
      <Router history={browserHistory}>
        <Route path={'/adminLogin'} component={AdminLoginPage} />
        <Route path={'/admin'} render={() => (getTokenVerification().length > 0 ? <AdminMainPage /> : <Redirect to={'/adminLogin'} />)} />
        {storeLoaded ? (
          <Switch>
            <Route exact path={'/'} component={MainPage} />
            <Route path={'/login'} component={LoginPage} />
            <Route path={'/loginSuccess'} component={LoginSuccessPage} />
            <Route path={'/signup'} component={SignupPage} />
          </Switch>
        ) : null}
      </Router>
    </Provider>
  )
}