Question

我正在使用React JS路由并已安装react-route-dom。我有两个主要组成部分，side-bar.js和nav.js。 side-bar.js具有一些组件，例如discussion.js，friends.js等，应根据提供的URL /指定的路径进行加载。

我在side-bar.js的{{1}}和<Links to="/path" />中指定了路由。当我单击nav.js上的链接时，它会更改指定的路径（URL已更改），但路由仍然相同（显示相同的组件），因为它应在nav.js，{ {1}}等。但是，另一方面，当我使用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

Answer 1

您需要从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);

sandbox

“链接”未导航到指定的路由-React JS（react-route-dom）

1 个答案: