Why do I use the Link from react-router-dom version ^4.3.1 error?

[putrairawan992]

Bug Report

Describe the bug if I use the link from react-router-dom there is an error like the screanshoot below, but if I use a normal href,

A clear and concise description of what the bug is. please help, the solution is how can you use the Link from react-router-dom?

To Reproduce this my code

import React from 'react';
import { Breadcrumb } from "antd";
import "./style.sass";
import propTypes from 'prop-types';
import {Link} from "react-router-dom";
import strings from '../../localization/localization';

export default function Breadcrumbs(props) {
    const breadcrumbs = props.breadcrumbs
    const type = props.type
    return (
        <div style={{ marginTop: 30 }}>
            <Breadcrumb separator=">" className="mp-breadcrumbs">
                <Breadcrumb.Item key="home">
                    <Link to="/">{strings.monggoPesen}</Link>
                </Breadcrumb.Item>
                {breadcrumbs.map((breadcrumb, index) => {
                    let checkLast = index === breadcrumbs.length - 1 ? true : false
                    return (
                        <Breadcrumb.Item key={index}>
                            {checkLast && type === "product" ?
                                <Breadcrumb.Item>
                                    {breadcrumb.label}
                                </Breadcrumb.Item>
                                :
                                <Link to={breadcrumb.link} className="mp-breadcrumbs-actived">
                                    {breadcrumb.label}
                                </Link>                                 
                            }
                        </Breadcrumb.Item>
                    )
                })}

            </Breadcrumb>
        </div>
    );
};

Breadcrumbs.propTypes = {
    type: propTypes.oneOf(['default', 'product']),
    breadcrumb: propTypes.arrayOf(Object)
}

Breadcrumbs.defaultProps = {
    type: 'default'
}

and this file index.md :

---

name: Breadcrumbs menu: Components

import { Playground, Props } from 'docz'
import Breadcrumbs from './'
import { Breadcrumb } from "antd"
import "antd/dist/antd.less"

# Breadcrumbs

This is Breadcrumbs of Monggopesen Ecommerce

## Properties (props)

<Props of={Breadcrumbs} />

## Purpose Of Props

## Details

no details

## Playground

### Breadcrumbs

<Playground>
{() => {     
let category = [
    {
      label: "mainan & hobi ",
      link: "/category/mainan & hobi"
    },
    {
    label: "sepatu",
    linj: "/category/mainan & hobi/sepatu"
    }
  ]
   return <Breadcrumbs breadcrumbs={category}  />
}}
</Playground>

### Breadcrumbs with type="product"

<Playground>
{() => {     
let category = [
    {
      label: "mainan & hobi ",
      link: "/category/mainan & hobi"
    },
    {
    label: "sepatu",
    link: "/category/mainan & hobi/sepatu"
    },
    {
    label: "Motor supra",
    link: ""
    }
  ]
   return <Breadcrumbs breadcrumbs={category} type="product" />
}}
</Playground>

FOR BUGS: Insert debug trace

In order to allow us to quickly reproduce you issue please include a link to a reproduction repository.

Expected behavior

A clear and concise description of what you expected to happen..

Environment

• OS: OSX 10.14.6
• Node/yarn version: [e.g. Node v10.16.0/yarn 1.17.3]

Additional context/Screenshots

[rakannimer]

Hey @putrairawan992

This happens because you didn't wrap the app with a Router from react-router-dom.

I added an example of how to do that by creating a file in src/gatsby-theme-docz/wrapper.js that wraps the page with a MemoryRouter.

Try it out in a new app :

yarn create docz-app react-router-docz-app --example react-router 
cd react-router-docz-app
yarn docz dev

Or in your app create a file called wrapper.js in src/gatsby-theme-docz/ and add the following code in it :

import React from "react";
import { MemoryRouter } from "react-router-dom";

export default ({ children }) => {
  return <MemoryRouter>{children}</MemoryRouter>;
};

Hope that helps !

[putrairawan992]

if for my code above, where should I put the memory router?

[rakannimer]

Code above remains as is.

In your codebase, add a file src/gatsby-theme-docz/wrapper.js and inside it, use the memory router.

[putrairawan992]

then how do you use it?

[putrairawan992]

[rakannimer]

🤔 docz should detect it automatically. Which version of docz are you using ?

[putrairawan992]

[putrairawan992]

Do I have to upgrade?

[rakannimer]

Ok, so you're on v1. You don't have to upgrade to v2 if you're not ready. You should use the wrapper field in the docz config : http://docz-v1.surge.sh/docs/project-configuration#wrapper

In your doczrc.js add wrapper: 'src/gatsby-theme-docz/wrapper' :

export default {
+  wrapper: 'src/gatsby-theme-docz/wrapper',
}

[putrairawan992]

const path = require('path'); const fs = require('fs'); const lessToJs = require('less-vars-to-js'); const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './src/antd-config/antdThemeVars.less'), 'utf8'));

export default { title: 'ECOMMERCE', wrapper: './src/gatsby-theme-docz/wrapper', modifyBundlerConfig: (config) => { config.resolve.extensions.push('.sass') config.resolve.extensions.push('.css') config.module.rules.push({ test: /.sass$/, use: [ "style-loader", "css-loader", "sass-loader", { loader: 'sass-resources-loader', options: { resources: './src/sass/variable.sass' }, } ] }) config.module.rules.push({ test: /.css$/, use: ["style-loader", "css-loader", "sass-loader"] }) config.module.rules.push({ test: /.less$/, use: [ 'style-loader', 'css-loader', { loader: "less-loader", options: { javascriptEnabled: true, modifyVars: themeVariables } } ] }) return config }, notUseSpecifiers: true, filterComponents: files => files.filter(filepath => /w*.(js|jsx|ts|tsx)$/.test(filepath)) }

[putrairawan992]

still error

[putrairawan992]

[jesperorb]

@putrairawan992 That error is not the same error. If you check the error messages it is a different error and I think this new error you have has more to do with react-router and how react router Link is supposed to be used and not so much linked to docz.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.