«Ссылка» не перемещается по указанным маршрутам - React JS (реагировать на маршрут-дом) - PullRequest
Новая
       18

«Ссылка» не перемещается по указанным маршрутам - React JS (реагировать на маршрут-дом)

0 голосов
/ 18 июня 2019

Я работаю с маршрутами React JS и установил react-route-dom. У меня есть два основных компонента, side-bar.js и nav.js. side-bar.js имеет некоторые компоненты, такие как discussion.js, friends.js и т. Д., Которые должны быть загружены в соответствии с указанным URL / указанным путем.

Я указал маршруты в side-bar.js и <Links to="/path" /> в nav.js. Когда я нажимаю ссылку на nav.js, она меняет указанный путь (URL-адрес изменяется), но маршрут остается тем же (показан тот же компонент), так как он должен переключаться между discussion.js, friends.js и т. Д. Но с другой стороны, когда я обновляю страницу указанными путями в <Link to="/discussion"/>, требуемый компонент загружается соответственно. Я не знаю, в чем проблема, что он работает только при обновлении страницы, а не по ссылке.

side-bar.js код 

import React, { Component } from 'react'
import Discussion from './side-bar-components/discussion'
import Friends from './side-bar-components/friends'
import Notifications from './side-bar-components/notifications'
import Settings from './side-bar-components/settings'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';


export class sidebar extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             
        }
    }
    
    render() {
        return (
            <div className="sidebar">
                <div className="container">
                    <div className="tab-content">
                        <Router>
                            <Switch>
                                <Route path={'/'} exact component={Discussion}/>
                                <Route path={'/discussion'} component={Discussion}/>
                                <Route path={'/friends'}  component={Friends}/>
                                <Route path={'/notifications'}  component={Notifications}/>
                                <Route path={'/settings'}  component={Settings}/>
                            </Switch>
                        </Router>

                    </div>
                </div>
            </div>
        )
    }
}

export default sidebar

nav.js код 

import React, { Component } from 'react'
import {Link, BrowserRouter} from 'react-router-dom';

export class nav extends Component {
    render() {
        return (
                <nav className="navigation">
                    <div className="container">
                        <a href="#nav" className="logo" rel="home"> <img src="dist/img/logo.png" alt="logo" /> </a>
                        <ul className="nav" role="tablist">
                            <BrowserRouter>
                                <li>
                                    <Link to="/discussion">
                                        <i data-eva="message-square" data-eva-animation="pulse"></i>
                                    </Link>
                                </li>
                                <li>
                                    <Link to="/friends">
                                        <i data-eva="people" data-eva-animation="pulse"></i>
                                    </Link>
                                </li>
                                <li>
                                    <Link to="/notifications">
                                        <i data-eva="bell" data-eva-animation="pulse"></i>
                                    </Link>
                                </li>
                                <li>
                                    <Link to="/settings">
                                        <i data-eva="settings" data-eva-animation="pulse"></i>
                                    </Link>
                                </li>
                                <li><button type="button" className="btn mode"><i data-eva="bulb" data-eva-animation="pulse"></i></button></li>
                                <li><button type="button" className="btn"><img src="dist/img/avatars/avatar-male-1.jpg" alt="avatar" /><i data-eva="radio-button-on"></i></button></li>
                            </BrowserRouter>
                        </ul>
                    </div>
                </nav>
        )
    }
}

export default nav

home.js код (родительский компонент) 

import React, { Component } from 'react';
import Nav from './app-components/nav'
import Sidebar from './app-components/sidebar'
import Compose from './app-components/compose'
import Chat from './app-components/chat'


export class home extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             
        }
    }


    

    render() {
        return (
            <div className="layout">

                <Nav />
                <Sidebar />
                <Chat />
                <Compose />
            
            </div>
        )
    }
}

export default home

1 Ответ

1 голос
/ 18 июня 2019

Вам необходимо удалить BrowserRouter из nav и обработать маршруты из родительского компонента.

Включите компоненты, которые вы хотите всегда показывать внутри Router, но за пределами Switch, и компоненты, которые вы хотите использовать в качестве страниц внутри Route

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
  Link,
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import "./styles.css";

const renderLink = path => <Link to={`/${path}`}>{path}</Link>;

const NestedDiscussion = ({ match }) => (
  <div>
    <h1>nested route for discussion {match.params.id}</h1>
  </div>
);

const Discussion = ({ match }) => (
  <div>
    <h1>discussion</h1>
    <Link to={`${match.url}/1`}>Discussion 1</Link>
    <Link to={`${match.url}/2`}>Discussion 2</Link>
    <Link to={`${match.url}/3`}>Discussion 3</Link>
    <Route path={`${match.url}/:id`} component={NestedDiscussion} />
  </div>
);

const Friends = () => <h3>Friends</h3>;
const Notifications = () => <h3>Notifications</h3>;
const Settings = () => <h3>Settings</h3>;

class SideBar extends Component {
  render() {
    return (
      <div className="sidebar">
        <div className="container">
          <div className="tab-content">SideBar</div>
        </div>
      </div>
    );
  }
}

class Nav extends Component {
  render() {
    return (
      <nav className="navigation">
        <div className="container">
          <ul className="nav" role="tablist">
            {renderLink("discussion")}
            {renderLink("friends")}
            {renderLink("notifications")}
            {renderLink("settings")}
          </ul>
        </div>
      </nav>
    );
  }
}

function App() {
  return (
    <div className="App">
      <Router>
        <Nav />
        <SideBar />
        <Switch>
          <Route
            path={"/"}
            exact
            render={() => <Redirect to="/discussion" />}
          />
          <Route path={"/discussion"} component={Discussion} />
          <Route path={"/discussion/:id"} component={Discussion} />
          <Route path={"/friends"} component={Friends} />
          <Route path={"/notifications"} component={Notifications} />
          <Route path={"/settings"} component={Settings} />
        </Switch>
      </Router>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

песочница

...