React-mdl Ошибка: не удалось выполнить инвариант: вы не должны использовать <Link>за пределами <Router>Сайт не маршрутизируется - PullRequest
Новая
       31

React-mdl Ошибка: не удалось выполнить инвариант: вы не должны использовать <Link>за пределами <Router>Сайт не маршрутизируется

0 голосов
/ 15 января 2020

main. js

import React from 'react';
import {BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import home from './home';
import about from './about';
import menu from './menu';
import gallery from './gallery';
import franchise from './franchise';

const Main = () => (

    <Switch>

        <Route exact path ="/" component={home} />
        <Route  path ="/about" component={about} />
        <Route  path ="/menu" component={menu} />
        <Route  path ="/gallery" component={gallery} />
        <Route  path ="/franchise" component={franchise} /> 


    </Switch>
)
export default Main;

nav. js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Layout, Header, Navigation, Drawer, Content} from 'react-mdl';
import Main from './main';
export default class CustomNavbar extends Component {
  render() {
    return (
<div className="demo-big-content">
    <Layout>
        <Header title="CHEFSTYLE" scroll>

            <Navigation>
                <Link href="/" to="/">Home</Link>
                <Link href="/about" to="/about">About</Link>
                <Link href="/menu">Menu</Link>
                <Link href="/gallery">Gallery</Link>
                <Link href="/franchise">Franchise</Link>
            </Navigation>

        </Header>
        <Drawer title="CHEFSTYLE">
            <Navigation>
                <Link href="/" to="/">Home</Link>
                <Link href="/about" to="/about">About</Link>
                <Link href="/menu">Menu</Link>
                <Link href="/gallery">Gallery</Link>
                <Link href="/franchise">Franchise</Link>
            </Navigation>
        </Drawer>
        <Content>
            <div className="page-content" />
            <Main/>
        </Content>
    </Layout>
</div>  )

  }
}

Ошибка: сбой инварианта : Вы не должны использовать вне инварианта D: /pandemic/pandemicmateria/kupsmaterial/node_modules/tiny-invariant/dist/tiny-invariant.esm.js: 11 (анонимная функция) D: / pandemic / pandemicmateria / modules / Link . js: 84 Я использую response-mdl для пользовательского интерфейса в реакции, если я использую тег Router вместо Switch в main. js и если я заключаю тег навигации с тегом Router в nav. js означает, что я не получаю никакой ошибки, но я не получаю вывод ... я имею в виду, что страница не маршрутизируется относительно ссылок

1 Ответ

0 голосов
/ 15 января 2020

Вы можете получить доступ к своим маршрутам, используя Link, только если все ваше приложение находится в вашем маршрутизаторе. 

<BrowserRouter>
<Layout>
        <He....

</Layout>
</BrowserRouter>
...