ReactJS - React Router 未更改组件但 url 正在更改 [英] ReactJS - React Router not changing component but url is changing

问题描述

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

App.JS

import React, { Component } from 'react';从'./logo.svg'导入标志；导入'./App.css';从react-router-dom"导入{ BrowserRouter 作为路由器、路由、链接}；从./Grid/header"导入{标题}；从./Grid/footer"导入{页脚}；从'./Grid/Menulinks'导入{菜单链接}；从'./Grid/Home'导入{家}；从'./Grid/ContactList'导入{联系人列表}；类 App 扩展组件 {使成为() {返回 (<div><标题标题="这是标题"></标题><菜单链接></菜单链接><路由器><开关><路由精确路径="/" component={Home}/><Route path="/contact" component={ContactList}/></开关></路由器><页脚></页脚>

)}}导出默认应用程序；

Menulink.tsx:

import * as React from 'react';import { Link, BrowserRouter as Router } from "react-router-dom";导出类 Menulink 扩展 React.Component {使成为() {返回 (<路由器><开关><链接到="/">主页</链接>|<Link to="/contact">联系人列表</Link></开关></路由器>)}}

<块引用>

问题是，当我点击链接时，URL 会改变，但组件没有得到更换.是不是因为我已经写了链接和路由不同的文件?

解决方案

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

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

三、从react-router-dom

导入Switch

import React, { Component } from 'react';从'./logo.svg'导入标志；导入'./App.css';import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";从./Grid/header"导入{标题}；从./Grid/footer"导入{页脚}；从'./Grid/Menulinks'导入{菜单链接}；从'./Grid/Home'导入{家}；从'./Grid/ContactList'导入{联系人列表}；类 App 扩展组件 {使成为() {返回 (<div><标题标题="这是标题"></标题><路由器><路由组件={Menulink}/><开关><路由精确路径="/" component={Home}/><Route path="/contact" component={ContactList}/></开关></路由器><页脚></页脚>

)}}导出默认应用程序；

<小时>

import * as React from 'react';import { Link, BrowserRouter as Router } from "react-router-dom";导出类 Menulink 扩展 React.Component {使成为() {返回 (<React.Fragment><链接到="/">主页</链接>|<Link to="/contact">联系人列表</Link></React.Fragment>)}}

I am rookie to ReactJS and recently start learning. I've created 2 components home and ContactList using TSX. I am using React-Router to change route.

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>

        )
    }
}

Issue is, when I click on link, URL change, but component is not getting replace. is it because I've written links and route both in different files?

解决方案

First, you need to have one Router instance

Second, MenuLink needs to be rendered as a Child of Router

Third, import Switch from react-router-dom

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>

        )
    }
}

这篇关于ReactJS - React Router 未更改组件但 url 正在更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！