Reactjs: компоненты не меняются при нажатии на NavLinks - PullRequest
Новая
       25

Reactjs: компоненты не меняются при нажатии на NavLinks

0 голосов
/ 27 марта 2019

В основном я изучаю React Routing с react-router-dom, version 5.0.0, и у меня есть некоторые компоненты, такие как Home, About, Contact и т. Д., И я пытаюсь изменить каждый компонент, нажав NavLink, но не меняя компоненты, просто меняя URL

Indexjs: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './Style.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Header from "./components/Header";
import Footer from "./components/Footer";
import Web from "./Web";


ReactDOM.render(
    <React.Fragment>
        <Header />
        <Web />
        <Footer />
    </React.Fragment>
    , document.getElementById('root'));

serviceWorker.register();

Веб-компонент: 

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch,withRouter} from "react-router-dom";
//import Route from 'react-router-dom/Route';
import {Home} from "./components/Home";
import {About} from "./components/About";
import {Contact} from "./components/Contact";
import {Products} from "./components/Products";

class Web extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path={"/"} exact component={withRouter(Home)}/>
                    <Route path={"/products"} component={withRouter(Products)}/>
                    <Route path={"/about"} component={About}/>
                    <Route path={"/contact"} component={Contact}/>
                    <Route path={"/something"} render={
                        () => {
                            return (<h1>This is something page</h1>);
                        }
                    }/>
                </Switch>
            </Router>
        );
    }
}

export default Web;

Компонент заголовка: 

import React, { Component } from 'react';
import logo from '../logo.jpg';
import {BrowserRouter as Router, Route, Link, NavLink, Redirect} from "react-router-dom";

class Header extends Component {
    render() {
        return(
            <Router>
                <header className={'header_area'}>
                    <div className="container">
                        <div className="logo">
                            <a href="/"><img src={logo} alt="logo"/></a>
                        </div>
                        <nav className={'main_nav'}>
                            <ul>
                                <li><NavLink to="/" activeStyle={{color:"green"}} exact>Home</NavLink></li>
                                <li><NavLink to="/products" activeStyle={{color:"green"}} exact>Products</NavLink></li>
                                <li><NavLink to="/about" activeStyle={{color:"green"}} exact>About</NavLink></li>
                                <li><NavLink to="/contact" activeStyle={{color:"green"}} exact>Contact</NavLink></li>
                            </ul>
                        </nav>
                        <div className="float_clear"></div>
                    </div>
                </header>
            </Router>
        );
    }
}

export default Header;

Домашний компонент: 

import React from 'react';

export class Home extends React.Component {
    render() {
        return (
            <React.Fragment>
                <article className={'article_area'}>
                    <div className="container article">
                        <h2>Home</h2>

                    </div>
                </article>
            </React.Fragment>
        );
    }
}

О компоненте: 

import React from 'react';

export class About extends React.Component {
    render() {
        return (
            <React.Fragment>
                <article className={'article_area'}>
                    <div className="container article">
                        <h2>About us</h2>
                    </div>
                </article>
            </React.Fragment>
        );
    }
}

Кто-нибудь может мне помочь?

1 Ответ

1 голос
/ 27 марта 2019

Вы должны использовать один Router, и все ваши маршруты и ссылки должны иметь его как одного из родителей.

Измените свой индекс: 

<React.Fragment>
    <Router>
        <Header />
        <Web />
        <Footer />
    </Router>
</React.Fragment>

и удалить другие <Router> s

Также вам не нужно использовать withRouter для компонентов внутри Route. Они получат реквизиты реакции-роутера напрямую.

...