<Router> может иметь только один дочерний элемент. - PullRequest
Новая
       5

<Router> может иметь только один дочерний элемент.

0 голосов
/ 17 октября 2018

я делаю простой navbar с реагирующим маршрутизатором. Я читал другие темы с этой проблемой, но, похоже, ни один из них не решил эту проблему 

mport React, { Component } from "react";
import Navbar from "./components/Navbar";
import { BrowserRouter } from "react-router-dom";
import Route from "react-router-dom/Route";
import Home from "./components/Home";
import Switch from "react-router-dom/Switch";
class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Navbar />
          <Route path="/" component={Home} />{" "}
        </Switch>{" "}
      </BrowserRouter>
    );
  }
}

export default App;
Я также получаю эти {""}, но я не знаю почему. Кажется, из-за более симпатичного или ESLint. Если у кого-то есть решение, также помогите. Я думаю, что это кореньпроблемы.Пользовательские настройки для него: 

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange",
  "editor.renderIndentGuides": false,
  "git.autofetch": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
 
}

Спасибо за помощь

1 Ответ

0 голосов
/ 17 октября 2018

Вы пытались обернуть все в BrowserRouter компонентом Fragment?
Это фиктивный компонент, который не будет генерировать HTML-теги: 

import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
...
class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Fragment>
            <Navbar />
            <Route path="/" component={Home} />
          </Fragment>
        </Switch>
      </BrowserRouter>
    );
  }
}
export default App;


Обновление: Другие шаги, которые я хотел бы предпринять, чтобы найти корень проблемы:

  1. проверьте, есть ли у вас последний пакет для реакции-маршрутизатора
  2. временно замените Switch на Fragment, как я сделал длямалый проект

enter image description here

создайте новое приложение с помощью create-реагировать-app и переместите туда папку src и package.json - убедитесь, что ваш код в порядке
...