Ir para a rota - tsx - resolvido

Front-end
,
#1

Tenho este código.

import {
    AppstoreOutlined,
    ContainerOutlined, DesktopOutlined,
    MailOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
    PieChartOutlined
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import './styles.css';
const { SubMenu } = Menu;
const SiderSystem = () => {
    const [ collapsed, setCollapsed ] = useState(false);
    const toggleCollapsed = (e: any) => {
        setCollapsed(!collapsed);
        console.log(collapsed)
    };
    const handleClick = (props: any) => {
        return <Redirect to={{ pathname: "/register" }} />
        //return <Redirect from="/register" to="/register" />
    };
    return (
        <div style={{ width: 200 }}>
                <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                </Button>
                <Menu
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="light"
                inlineCollapsed={collapsed}
                onClick={handleClick}
                >
                <Menu.Item key="1" icon={<PieChartOutlined />} >
                    Option 1
                </Menu.Item>
                <Menu.Item key="2" icon={<DesktopOutlined />}>
                    Option 2
                </Menu.Item>
                <Menu.Item key="3" icon={<ContainerOutlined />}>
                    Option 3
                </Menu.Item>
                <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                    <Menu.Item key="7">Option 7</Menu.Item>
                    <Menu.Item key="8">Option 8</Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
                    <Menu.Item key="9">Option 9</Menu.Item>
                    <Menu.Item key="10">Option 10</Menu.Item>
                    <SubMenu key="sub3" title="Submenu">
                    <Menu.Item key="11">Option 11</Menu.Item>
                    <Menu.Item key="12">Option 12</Menu.Item>
                    </SubMenu>
                </SubMenu>
                </Menu>
        </div>
    )
}
export default SiderSystem;

na const handleClick, preciso ir para outra rota. Mas clico no meu e não funciona

#2

voce tem que no menu, colocar um

<Link to=""> 
      <Menu />
</Link>

ou o seu componente deve receber um prop history. e no seu metodo onlick ja faz direto

const SiderSystem = ({ history }) => {
    return (
        <Menu onClick={history.push("/sua_rota")} />
    );
}
#3

Fiz assim e deu erro:

<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
    <Link to="/register">
        <Menu.Item key="1" icon={<PieChartOutlined />}>
        Option 1
        </Menu.Item>
    </Link>
</Menu>

Error: Invariant failed: You should not use <Link> outside a <Router>

invariant

C:/Docker/react/MegaHack_Sebrae_Web/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:10

(anonymous function)

C:/Docker/react/modules/Link.js:84

```
  81 | return (  82 |   <RouterContext.Consumer>  83 |     {context => {> 84 |       invariant(context, "You should not use <Link> outside a <Router>");     | ^  85 |   86 |       const { history } = context;  87 | 
```

View compiled

▶ 15 stack frames were collapsed.

Module../src/index.tsx

C:/Docker/react/MegaHack_Sebrae_Web/src/index.tsx:74

```
  71 |   }  72 | }  73 | > 74 | ReactDOM.render(<SiderPrincipal />, document.getElementById('root'));
```

View compiled

__webpack_require__

C:/Docker/react/MegaHack_Sebrae_Web/webpack/bootstrap:784

```
  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;
```

View compiled

fn

C:/Docker/react/MegaHack_Sebrae_Web/webpack/bootstrap:150

```
  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {
```

View compiled

1

http://localhost:3000/static/js/main.chunk.js:1190:18

__webpack_require__

C:/Docker/react/MegaHack_Sebrae_Web/webpack/bootstrap:784

```
  781 | };  782 |   783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  785 |   786 | // Flag the module as loaded  787 | module.l = true;
```

View compiled

checkDeferredModules

C:/Docker/react/MegaHack_Sebrae_Web/webpack/bootstrap:45

```
  42 | 	}  43 | 	if(fulfilled) {  44 | 		deferredModules.splice(i--, 1);> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);     | ^  46 | 	}  47 | }  48 | 
```

View compiled

Array.webpackJsonpCallback [as push]

C:/Docker/react/MegaHack_Sebrae_Web/webpack/bootstrap:32

```
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);  30 |   31 | 	// run deferred modules when all chunks ready> 32 | 	return checkDeferredModules();     | ^  33 | };  34 | function checkDeferredModules() {  35 | 	var result;
```

View compiled

(anonymous function)

http://localhost:3000/static/js/main.chunk.js:1:69

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.
#4

Não é componente. tentei dessa forma, mas ele dá erro ao importar history

#5

o primeiro erro, é pq voce precisa definir sua estrutura de rotas. se nao voce nao vai conseguir usar o 

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import './layout/bootstrap';

import AuthOrApp from './authOrApp';
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
        <AuthOrApp />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

//ponto de entrada da aplicacao
//preste atencao que se existir usuario logado eu ja envio para o routes.
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux';
import Routes from './routes'
import Login from './pages/Login'
import { validate } from './store/auth';

const AuthOrApp = ({ children }) => {

    const { user, valid } = useSelector(state => state.auth);
    const dispatch = useDispatch();

    useEffect(() => {
        if (user) {
            dispatch(validate(user.token));
        }
    }, [dispatch, user]);

    return (
        <>
            {user && valid &&
                <Routes>{children}</Routes>
            }
            {!user && !valid &&
                <Login />
            }
        </>
    )
}
export default AuthOrApp;

import React from 'react';
import { Redirect, Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom'

import Login from './pages/Login';
import Header from './layout/Header';
import Footer from './layout/Footer';
import Cotacao from './pages/Cotacao';
import CotacaoResposta from './pages/CotacaoResposta'

export default function Routes() {

    return (
        <>
           //Agora aqui dentro dessa estrutura envolvida pelo BrowserRoute os componentes serao 
           //renderizados e eu vou conseguir usar o Link dentro deles. veja se a sua
           //aplicacao esta assim.
            <BrowserRouter>
                <Header />
                <div className="content-wrapper">
                    <Switch>
                        <Route path='/login' component={Login} />
                        <Route path="/cotacao/:id_cotacao/responder" component={CotacaoResposta} />
                        <Route path='/' component={Cotacao} exact />
                        <Redirect from='*' to='/' />
                    </Switch>
                </div>
                <Footer />
            </BrowserRouter>
        </>
    )
}

//Nesse componente tem um exemplo do link la no final.
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom';

import api from '../../services/api';
import ContentHeader from '../../layout/ContentHeader'
import Content from '../../layout/Content'

function Cotacao({ history }) {
    const { user } = useSelector(state => state.auth.user);
    const [cotacoes, setCotacoes] = useState([]);

    useEffect(() => {
        async function loadCotacoes() {
            const response = await api.get('/cotacoes');
            setCotacoes(response.data);
        }
        if (user.id) {
            loadCotacoes();
        }
    }, [user.id]);

    return (
        <>
            <ContentHeader title="Listagem de cotações" small="" />
            <Content>
                <div className="table-responsive">
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th>Descrição</th>
                                <th>Data Inicial</th>
                                <th>Data Final</th>
                                <th>Ação</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                cotacoes.map(cotacao => (
                                    <tr key={cotacao.id}>
                                        <td>{cotacao.descricao}</td>
                                        <td>{cotacao.dataInicial}</td>
                                        <td>{cotacao.dataFinal}</td>
                                        <td>
                                            <Link to={`/cotacao/${cotacao.id}/responder`}>Responder</Link>
                                        </td>
                                    </tr>
                                ))
                            }
                            {cotacoes.lengh === 0 && <tr><td colSpan="4">Nenhuma cotação em aberto</td></tr>}
                        </tbody>
                    </table>
                </div>
            </Content>
        </>
    );
}
export default Cotacao;
#6

O menu na minha estrutura de template, que uso o adminlte eu faco assim, sao tres componentes, MenuTree, Menu e MenuItem (aqui vai o )

import React from 'react'

export default function menuTree(props) {

    return (
        <li className="nav-item has-treeview">
            <a href={props.path} className="nav-link">
                <i className={`nav-icon fa fa-${props.icon}`}></i>
                <p>
                    {props.label}
                    <i className="right fas fa-angle-left"></i>
                </p>
            </a>
            <ul className="nav nav-treeview">
                {props.children}
            </ul>
        </li>
    )
}


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

export default function menuItem(props) {
    return (
        <li className="nav-item" style={{marginLeft: props.marginLeft || 0}} >
            <Link to={props.path} className="nav-link">
                <i className={`nav-icon fa fa-${props.icon}`}></i> 
                <p>{props.label}</p>
            </Link>
        </li>
    )
}

import React from 'react'
import MenuItem from './menuItem.js'
import MenuTree from './menuTree'

export default function menu() {
    return (
        <nav className="mt-2">
            <ul className="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <MenuItem path="/" label='Dashboard' icon="tachometer-alt" />
                <MenuTree label="Cadastros" icon="database">
                    <MenuItem path="/produto" label="Produto" icon="luggage-cart" marginLeft={20}/>
                    <MenuItem path="/cliente" label="Cliente" icon="address-book" marginLeft={20}/>
                </MenuTree>
                <MenuTree label="Produtos" icon="barcode">
                    <MenuItem path="/produtos/validacaoPreco" label="Validação de preco" icon="hand-holding-usd" marginLeft={20} />
                    <MenuItem path="/produtos/alteraPreco" label="Altera preço" icon="tag" marginLeft={20} />
                </MenuTree>
                <MenuTree label="Caixas" icon="cash-register">
                    <MenuItem path="/caixas/flashVendas" label="Flash de vendas" icon="dollar-sign" marginLeft={20}/>
                </MenuTree>
                <MenuTree label="Compras" icon="shopping-cart">
                    <MenuItem path="/compras/leilao" label="Leilão" icon="gavel" marginLeft={20}/>
                    <MenuItem path="/compras/pedidoCompra" label="Pedido de compra" icon="truck-loading" marginLeft={20}/>
                    <MenuItem path="/compras/trocaMercadoriaFornecedor" label="Troca com fornecedor" icon="exchange-alt" marginLeft={20}/>
                </MenuTree>
                <MenuTree label="Comunicação" icon="satellite-dish">
                    <MenuItem path="/comunicacao/cargaPdv" label="Carga para pdvs" icon="desktop" marginLeft={20}/>
                    <MenuItem path="/comunicacao/cargaBalanca" label="Carga para balanca" icon="balance-scale" marginLeft={20}/>
                </MenuTree>
                <MenuTree label="Utilitários" icon="tools">
                    <MenuItem path="/utilitarios/nfceMonitoramento" label="Monitoramento NFC-e" icon="file-invoice" marginLeft={20}/>
                </MenuTree>
            </ul>
        </nav>
    )
}
#7

Então, pediram no projeto para utilizar a biblioteca : https://ant.design

e assim estou utilzando o componente menu: https://ant.design/components/menu/

#8

o componente visual eh de escolha, o meu eh assim pq eu uso adminlte. Mas o que importa é onde voce vai circundar com o Link

#9

tudo bem, mas aqui não aceita o <Link>

Aqui não aceita isso: export default function menuTree(props), pois mostra este erro. Só aceita se for export default function menuTree(props: any).

Meus arquivos são tsx e não .js

#10

erro
erro.png1627×350 20.2 KB

index.tsx

import { Breadcrumb, Layout, Menu } from 'antd';
import "antd/dist/antd.css";
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App";
import MenuSystem from "./pages/MenuSystem/MenuSystem";
const { Header, Content, Footer, Sider } = Layout;
class SiderPrincipal extends Component {
  constructor( props: { collapsed: boolean; } ){
    super(props);
    this.state = { ...props };
  }
  state = {
    collapsed: false,
  };
  onCollapse = (collapsed: any) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  render() {
    return (
      <>
        <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
            <div className="logo" />
            <MenuSystem />
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }} />
            <Content>
              <Breadcrumb>
                <Breadcrumb.Item>Página inicial</Breadcrumb.Item>
                <Breadcrumb.Item>Pagina atual</Breadcrumb.Item>
              </Breadcrumb>
              <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                <App />
              </div>
            </Content>
            <Footer>2020</Footer>
          </Layout>
        </Layout>
      </>
    );
  }
}
ReactDOM.render(<SiderPrincipal />, document.getElementById('root'));

MenuSystem.tsx

import {
  DesktopOutlined,
  FileOutlined, PieChartOutlined,
  TeamOutlined,
  UserOutlined
} from '@ant-design/icons';
import { Menu } from 'antd';
import React from 'react';
const { SubMenu } = Menu;
export default function MenuSystem(props) {
  return (
    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
      <Menu.Item key="1" icon={<PieChartOutlined />}>
        Option 1
      </Menu.Item>
      <Menu.Item key="2" icon={<DesktopOutlined />}>
        Option 2
      </Menu.Item>
      <SubMenu key="sub1" icon={<UserOutlined />} title="User">
        <Menu.Item key="3">Tom</Menu.Item>
        <Menu.Item key="4">Bill</Menu.Item>
        <Menu.Item key="5">Alex</Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
        <Menu.Item key="6">Team 1</Menu.Item>
        <Menu.Item key="8">Team 2</Menu.Item>
      </SubMenu>
      <Menu.Item key="9" icon={<FileOutlined />} />
    </Menu>
  );
}

visual studio code

vsc
vsc.png1183×703 62 KB

package.json

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "typescript": "^3.8.3"
},

Consegue entender ?

#11

Tentando fazer desta forma, não erro no Visual Studio Code.

Mas da erro ao clicar no menu.

MenuSystem.tsx

import {
  DesktopOutlined,
  FileOutlined, PieChartOutlined,
  TeamOutlined,
  UserOutlined
} from '@ant-design/icons';
import { Menu } from 'antd';
import React from 'react';
const { SubMenu } = Menu;
export default function MenuSystem(props: any) {
  const SiderSystem = (history: any) => { return ( <Menu onClick={history.push("/calendario")} /> ); }
  return (
    <>
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
        <Menu.Item key="1" icon={<PieChartOutlined />} onClick={SiderSystem}>
          Option 1
        </Menu.Item>
        <Menu.Item key="2" icon={<DesktopOutlined />}>
          Option 2
        </Menu.Item>
        <SubMenu key="sub1" icon={<UserOutlined />} title="User">
          <Menu.Item key="3">Tom</Menu.Item>
          <Menu.Item key="4">Bill</Menu.Item>
          <Menu.Item key="5">Alex</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
          <Menu.Item key="6">Team 1</Menu.Item>
          <Menu.Item key="8">Team 2</Menu.Item>
        </SubMenu>
        <Menu.Item key="9" icon={<FileOutlined />} />
      </Menu>
    </>
  );
}

Mostra este erro:

erro
erro.png1924×993 109 KB 

MenuSystem.tsx:14 Uncaught TypeError: history.push is not a function
    at SiderSystem (MenuSystem.tsx:14)
    at onClick (SubPopupMenu.js:265)
    at MenuItem._this.onClick (MenuItem.js:104)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)
SiderSystem @ MenuSystem.tsx:14
onClick @ SubPopupMenu.js:265
MenuItem._this.onClick @ MenuItem.js:104
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
react-dom.development.js:327 Uncaught TypeError: history.push is not a function
    at SiderSystem (MenuSystem.tsx:14)
    at onClick (SubPopupMenu.js:265)
    at MenuItem._this.onClick (MenuItem.js:104)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Entendeu ?

#12

As rotas estão assim:

import React from 'react';
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Calendario from './pages/Calendario';
import Login from './pages/Login';
import Register from './pages/Register';
export default function Routes() {
    return (
        <Router>
            <Switch>
                <Route path="/" exact component={Login} />
                <Route path="/register" component={Register} />
                <Route path="/calendario" component={Calendario} />
            </Switch>
        </Router>
    );
}

E estão funcionando, pois se no browser digito

http://localhost:3000/#/
http://localhost:3000/#/register
http://localhost:3000/#/calendario

e aperto enter funciona

#13

o history ele vai por destruction { history }. da forma que voce esta usando nao vai funcionar. Use Link, nao use o history. O Link nao deve estar funcionando pq essa sua sidebar, deve estar carregando fora do Router. faz assim, coloca o Router no te index para ficar assim:

ReactDOM.render(
  <Router>
        <App />
  </Router>,
  document.getElementById('root')
);

assim a sidebar fica dentro do router e o link vai funcionar

1 curtida
#14

Não funcionou também

vsc
vsc.png1024×806 32.3 KB

erro :

Failed to compile.

C:/Docker/react/MegaHack_Sebrae_Web/src/index.tsx
TypeScript error in C:/Docker/react/MegaHack_Sebrae_Web/src/index.tsx(7,18):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<RouterProps>): Router', gave the following error.
    Property 'history' is missing in type '{ children: Element; }' but required in type 'Readonly<RouterProps>'.        
  Overload 2 of 2, '(props: RouterProps, context?: any): Router', gave the following error.
    Property 'history' is missing in type '{ children: Element; }' but required in type 'Readonly<RouterProps>'.  TS2769

    5 | import App from "./App";
    6 | 
  > 7 | ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
      |                  ^
    8 | 
    9 |
#15

Acho que funcionou. Vou fazer uns testes aqui

#16

Assim funcionou.
<Link to='register'> Registro </Link>

Si fiz assim e funcionou

<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
        <Menu.Item key="1" icon={<PieChartOutlined />}>
          <Link to='register'> Registro </Link>
        </Menu.Item>
</Menu>
1 curtida
#17

Obrigado @thimor

1 curtida