#javascript #reactjs #react-router-dom #react-router-bootstrap
Вопрос:
Я создаю навигационную панель для проекта, и в приведенном выше сообщении мне предлагается проверить метод визуализации в моем компоненте заголовка. Я перепробовал все, что мог придумать, включая просмотр ответов здесь. В частности, я попытался переместить компонент заголовка между компонентом моего приложения и index.js файл Не уверен, нужен ли мне перерыв или что-то в этом роде, но в любом случае вот мой заголовок:
import React from "react";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import "bootstrap/dist/css/bootstrap.min.css";
import LinkContainer from "react-router-bootstrap";
const header = () => {
return (
<Navbar collapseOnSelect expand="lg">
<LinkContainer to="/App">
<Navbar.Brand href="/App">
<img
src="/PPLogoEdit.jpg"
width="110"
height="50"
className="d-inline-block align-top"
alt="pikelogo"
/>
</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<LinkContainer to="/App">
<Nav.Link style={{ color: "yellow" }} href="/App">
Home
</Nav.Link>
</LinkContainer>
<LinkContainer to="/About">
<Nav.Link style={{ color: "orange" }} href="/About">
About
</Nav.Link>
</LinkContainer>
<LinkContainer to="/Gallery">
<Nav.Link style={{ color: "green" }} href="/Gallery">
Gallery
</Nav.Link>
</LinkContainer>
<LinkContainer to="/Shop">
<Nav.Link style={{ color: "blue" }} href="/Shop">
Shop
</Nav.Link>
</LinkContainer>
<LinkContainer to="Contact">
<Nav.Link style={{ color: "purple" }} href="/Contact">
Contact
</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default header
и в index.js файл:
import React from "react";
import ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Header from './components/Header';
import App from "./components/App";
import About from "./components/About";
import Gallery from "./components/Gallery";
import Shop from "./components/Shop";
import Contact from "./components/Contact";
ReactDOM.render(<React.StrictMode>
<Router>
<Switch>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/gallery" component={Gallery} />
<Route path="/shop" component={Shop} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
</React.StrictMode>, document.getElementById("root"));
Любая помощь приветствуется, спасибо!
Комментарии:
1. Есть ли какой-нибудь след или что-нибудь в этом роде? Можете ли вы опубликовать полный текст ошибки?
2. Согласованный. Конечно, в ошибке что-то есть, и короткая трассировка стека говорит вам, в какой строке кода проблема. Где вы вообще визуализируете компонент заголовка?
3. Полный текст ошибки: Недопустимый тип элемента с инвариантным нарушением: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт. Проверьте метод рендеринга
Header
.
Ответ №1:
Посмотрите на сообщения об ошибках:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check your code at Header.jsx:24. in Header (at src/index.js:15) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:14) in StrictMode (at src/index.js:13)
Повторяет «Проверьте свой код в заголовке.jsx:XX» для всех строк, где LinkContainer
используется.
Он помечает LinkContainer
то, из чего вы пытаетесь импортировать react-router-bootstrap
. Вы импортируете его по умолчанию, но это должен быть именованный импорт.
import { LinkContainer } from "react-router-bootstrap";
Комментарии:
1. В дальнейшем, могу ли я использовать компоненты маршрутизатора и коммутатора в компоненте приложения? Сейчас я сталкиваюсь с проблемой, когда при первой загрузке отображается только заголовок, и мне нужно перейти на домашнюю страницу.
2. @Джереми Отлично! Если этот ответ решил вашу проблему, пожалуйста, отметьте, что он принят, и если он был полезен, я приглашаю вас, пожалуйста, не забудьте также озвучить его. Для последующего вопроса, конечно, вы могли бы переместить
Router
вApp
и отобразитьSwitch
там. Что считается вашей «домашней страницей»? Обычно я думаю, что большинство визуализируетApp
компонент в aRouter
, а затем указывает все маршруты приложения вApp
сравнении с визуализациейApp
компонента на любом конкретном пути маршрута.3. Знаешь, я не помню точно, как я это исправил, лол, но сейчас все работает хорошо. Еще раз спасибо, Дрю!