Components with calls to <Link>

[HAN20190621]

Hi,
I am learning react and was looking for an extension to view my component without running the app on the browser and saw the "React Preview". I have installed it in VS Code.

I am trying to load the About in preview however I am getting an error - Error: Invariant failed you should not use outside a Router.

App invokes About and About goes back to App.

Does the extension "React Preview" works with components with calls to Route/Link? Thanks.

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import About from './components/About';
import Footer from './components/Footer';

const App = () => {
  return (
    <Router>
        <Switch>
          <Route path='/about' component={About} />
        </Switch>
        <Footer />
    </Router>
  );
};

About component

import React from 'react';
import { Link } from 'react-router-dom';

const About = () => {
  return (
    <div style={{ textAlign: 'center' }}>
      <h4>Version 1.0.0</h4>
      <Link to='/'>Go back</Link>
    </div>
  );
};

export default About; 

[fwouts]

Hey @HAN20190621, welcome to React!

I'd encourage you to use Preview.js, which is going to replace React Preview very soon. They're basically the same, except Preview.js is more recent and supports frameworks other than React :)

You can definitely make this work, all you need is to set up a Wrapper file that includes the BrowserRouter component. I've added an example app so you can use that for inspiration! See https://github.com/fwouts/previewjs/tree/main/smoke-test-apps/cra-react-router

The same should also work with React Preview, the only difference being that the __previewjs__ directory would be named __reactpreview__ instead.

See https://previewjs.com/docs/config/wrapper for documentation.

Let me know how you go, and good luck on your learning journey!

[HAN20190621]

Thanks for this. It is loading now. I love seeing the components on the fly. I will try the new version.

If you don't mind, I have another question about useLocation(). I am using useLocation to test the path (if equal to root) however the value of location is /preview/ when viewing the component on Preview. I prefer not to change my code to also test for "/preview/".

import { useLocation, Link } from 'react-router-dom';

const Header = ({ title, resizing }) => {
  const location = useLocation();
  return (
    <div className='header'>
      <h1>{title}</h1>
      <div>
        {location.pathname === '/' && (
          <Link to='./Start'>
            <Button text='Start' colour='green' />
          </Link>
        )}
      </div>
    </div>
  );
};

Header.propTypes = {
  title: PropTypes.string,
  resizing: PropTypes.bool,
};

Header.defaultProps = {
  title: 'Start',
  resizing: false,
};

export default Header;

[fwouts]

That's good to hear!

This one is a bit more complicated. I don't think there's an easy way to make this work the way you'd like, however what I can recommend is to split up your components into "dumb UI components" that are controlled by stateful components.

For example in your case, it would look like:

import { useLocation, Link } from 'react-router-dom';

const DumbHeader = ({ locationPath, title, resizing }) => {
  return (
    <div className='header'>
      <h1>{title}</h1>
      <div>
        {locationPath === '/' && (
          <Link to='./Start'>
            <Button text='Start' colour='green' />
          </Link>
        )}
      </div>
    </div>
  );
};

DumbHeader.propTypes = {
  locationPath: PropTypes.string,
  title: PropTypes.string,
  resizing: PropTypes.bool,
};

const StatefulHeader = ({ title, resizing }) => {
  const location = useLocation();
  return <DumbHeader locationPath={location.pathname} title={title} resizing={resizing} />
});

StatefulHeader.defaultProps = {
  title: 'Start',
  resizing: false,
};

export default StatefulHeader;

This approach lends itself better to tools like Preview.js, Viteshot and Storybook, which are better suited for stateless components ("DumbHeader" in this case).

Note there are more sophisticated ways to organise your components—this is just one way off the top of my head.

[HAN20190621]

Thank you :)

…

On Sun, 13 Feb 2022, 8:52 pm François Wouts, ***@***.***> wrote: That's good to hear! This one is a bit more complicated. I don't think there's an easy way to make this work the way you'd like, however what I can recommend is to split up your components into "dumb UI components" that are controlled by stateful components. For example in your case, it would look like: import { useLocation, Link } from 'react-router-dom'; const DumbHeader = ({ locationPath, title, resizing }) => { return ( <div className='header'> <h1>{title}</h1> <div> {locationPath === '/' && ( <Link to='./Start'> <Button text='Start' colour='green' /> </Link> )} </div> </div> ); }; DumbHeader.propTypes = { locationPath: PropTypes.string, title: PropTypes.string, resizing: PropTypes.bool, }; const StatefulHeader = ({ title, resizing }) => { const location = useLocation(); return <DumbHeader locationPath={location.pathname} title={title} resizing={resizing} /> }); StatefulHeader.defaultProps = { title: 'Start', resizing: false, }; export default StatefulHeader; This approach lends itself better to tools like Preview.js, Viteshot <https://viteshot.com> and Storybook <https://storybook.js.org>, which are better suited for stateless components ("Header" in this case). Note there are more sophisticated ways to organise your components—this is just one way off the top of my head. — Reply to this email directly, view it on GitHub <#182 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMNEJSVEJEVMHCFQHZRZM4LU26EQPANCNFSM5OGD6TYA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>