ReactJS - React Router 没有改变组件但 url 正在改变答案

【问题标题】：ReactJS - React Router not changing component but url is changingReactJS - React Router 没有改变组件但 url 正在改变
【发布时间】：2019-07-01 06:45:03
【问题描述】：

我是 ReactJS 的新手，最近开始学习。我使用 TSX 创建了 2 个组件 home 和 ContactList。我正在使用 React-Router 更改路由。

App.JS

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';

class App extends Component {
  render() {
    return (
      <div>
        <Header title="This is Header">
        </Header>
        <Menulink></Menulink>
        <Router>
          <switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={ContactList} />
          </switch>
        </Router>
        <Footer></Footer>
      </div>
    )
  }
}

export default App;

Menulink.tsx：

import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";

export class Menulink extends React.Component {
    render() {
        return (
            <Router>
                <switch>
                    <Link to="/">Home </Link> |
                    <Link to="/contact">Contact List</Link>
                </switch>
            </Router>

        )
    }
}

问题是，当我单击链接时，URL 会更改，但组件不会得到替换。是不是因为我已经写了链接和路由不同的文件？

【问题讨论】：

你的switch 看起来很奇怪。从 react-router 导入 Switch 并使用它也不需要在 Switch 中包装 Links

标签： reactjs typescript react-router

【解决方案1】：

首先，您需要有一个Router 实例

其次，MenuLink 需要渲染为Router的Child

三、从react-router-dom导入Switch

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';



class App extends Component {
  render() {
    return (
      <div>
        <Header title="This is Header">
        </Header>
        <Router>
          <Route component={Menulink} />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={ContactList} />
          </Switch>
        </Router>
        <Footer></Footer>
      </div>
    )
  }
}

export default App;

import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";

export class Menulink extends React.Component {
    render() {
        return (
            <React.Fragment>
                    <Link to="/">Home </Link> |
                    <Link to="/contact">Contact List</Link>
            </React.Fragment>

        )
    }
}

【讨论】：

好的。得到了问题。这是一个愚蠢的错误，但我刚刚开始学习反应。所以发生了这个愚蠢的错误

【解决方案2】：

这是因为您有两个不同的路由器实例。您只需要一个位于组件层次结构顶部的路由器实例。或者至少..您希望通过 URL 改变的层次结构。

因此，如果您将 <MenuLink /> 放在定义路由的 <Router> 下，您的路由将正常工作。

【讨论】：