React Router в отдельных файлах - PullRequest
Новая
       41

React Router в отдельных файлах

0 голосов
/ 07 апреля 2019

Я пытаюсь добавить маршруты в свой реактивный проект. У меня есть три отдельных компонента:

Window.js 

import React, { Component } from 'react';
import SideBar from "../SideBar/SideBar";
import MainBody from "../MainBody/MainBody";
import  { BrowserRouter as Router} from "react-router-dom";

class Window extends Component{
    render() {
        return (
        <div>
        <Router>
                <SideBar />
                <MainBody />
        </Router>
        </div>
        );
    }
}

export default Window

SideBar.js 

import React, { Component } from 'react';
import PropTypes from "prop-types";
import  { BrowserRouter as Link} from "react-router-dom";

class SideBar extends Component {
     render() {
         return(

            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
         );
     }
}

export default SideBar;

MainBody.js 

import React, { Component } from 'react';
import Home from "./Home/Home";
import About from "./About/About";
import  { BrowserRouter as Route} from "react-router-dom";

class MainBody extends component {
     render() {
         return(
            <div>
            <Route exact path="/" component={Home}>
            <Route path="/about" component={About}>
            </div>
         );
     }
}

export default MainBody;

Таким образом, в основном, когда я нажимаю одну из моих ссылок в SideBar, я хочу перейти к этой ссылке в моем основном теле («Домашняя страница» и «О программе» просто отображают их названия). Однако, когда я запускаю это, мои компоненты Window, MainBody и SideBar работают, но мои компоненты Home и About не отображаются. Я правильно импортировал компоненты маршрутизатора в каждый файл компонента. Если я помещу Маршруты из MainBody в компонент Window, они будут отображены (хотя я не уверен, что ссылки маршрутизатора работают с ним). Любые предложения будут полезны!

1 Ответ

1 голос
/ 08 апреля 2019

В этих отрывках есть несколько опечаток, не знаю, если это было сделано при переписывании, или у вас есть это в вашей кодовой базе, но будьте осторожны с ними (компонент вместо Компонента, неправильно выполненная функция рендеринга с несколькими возвращаемыми элементами и т. Д.). 

import  { BrowserRouter as Link} from "react-router-dom";

Эти импорты также неверны. Вы должны импортировать Link, а не что-то как Link. Вы только переименовываете импорт BrowserRouter в Link. 

import  { Link } from "react-router-dom";

И то же самое для маршрута.

Вот пример codesanbox . Дайте мне знать, если вы этого хотели.

...