react-router#StaticRouter TypeScript Examples

The following examples show how to use react-router#StaticRouter. 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: EpiSpaRouter.tsx From foundation-lib-spa-core with Apache License 2.0

6 votes

Router : React.FunctionComponent<RouterProps> = (props) =>
{
    const epi = useEpiserver();

    if (epi.isServerSideRendering()) {
        const staticRouterProps : StaticRouterProps = {
            basename: props.basename,
            context: props.context,
            location: props.location
        };
        return <StaticRouter {...staticRouterProps}>{ props.children }</StaticRouter>
    }

    const browserRouterProps : BrowserRouterProps = {
        basename: props.basename,
        forceRefresh: props.forceRefresh,
        getUserConfirmation: props.getUserConfirmation,
        keyLength: props.keyLength
    };

    if (epi.isInEditMode() || epi.isEditable())
        return <BrowserRouter {...browserRouterProps}>{ props.children }</BrowserRouter>

    return <BrowserRouter {...browserRouterProps}><ElementNavigation>{ props.children }</ElementNavigation></BrowserRouter>
}

Example #2

Source File: reactMiddleware.tsx From Hybooru with MIT License

5 votes

export default function reactMiddleware(req: express.Request, res: express.Response, next: express.NextFunction) {
  res.react = (initialData, options) => {
    res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');
    res.header('Expires', '-1');
    res.header('Pragma', 'no-cache');
    
    const theme = req.cookies.theme || Theme.AUTO;
    const title = options?.title ? `${options?.title} | ${req.config.appName}` : req.config.appName;
    
    // noinspection JSUnreachableSwitchBranches
    switch(req.accepts(['html', 'json'])) {
      case "html": {
        const initialDataEx: AnySSRPageData = {
          ...initialData,
          _config: req.config,
          _csrf: req.csrfToken(),
          _theme: theme,
          _ssrError: false,
        };
        
        let reactContent: string;
        try {
          reactContent = ReactDOMServer.renderToString(
            <StaticRouter location={req.originalUrl} context={{}}>
              <App initialData={initialDataEx} />
            </StaticRouter>,
          );
        } catch(e) {
          console.error(chalk.red.bold("Error during SSR!"));
          console.error(e);
          reactContent = "There was an error during Server Side Rendering.";
          initialDataEx._ssrError = true;
        }
        
        const initialDataJSON = JSON.stringify(initialDataEx).replace(removeTags, tag => tagsToReplace[tag] || tag);
        
        res.send(index({
          reactContent,
          initialData: initialDataJSON,
          production: process.env.NODE_ENV === 'production',
          theme,
          title,
          appName: configs.appName,
          description: configs.appDescription,
          ogTitle: options?.ogTitle || configs.appName,
          ogDescription: options?.ogDescription || configs.appDescription,
          ogType: options?.ogTitle || "website",
          ogImage: options?.ogImage,
          ogAudio: options?.ogAudio,
          ogVideo: options?.ogVideo,
          ogUrl: options?.ogUrl || `${req.protocol}://${req.get('host')}${req.originalUrl}`,
          ogSiteName: options?.ogSiteName || configs.appName,
        }));
        break;
      }
      
      case "json":
        res.json({
          ...initialData,
          _title: title,
        });
        break;
      
      default:
        throw new HTTPError(406);
    }
    
    return res;
  };
  next();
}