“链接”没有导航到指定的路线 - React JS (react-route-dom)

Question

我正在使用 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

Answer 1

您需要从nav 中删除BrowserRouter 并处理来自父组件的路由。

在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);

sandbox