代码之家 › 专栏 › 技术社区 › Michel H.

更改时响应路由器v4

react-router-v4 react-router reactjs

Michel H. · 技术社区 · 7 年前

我正在开发一个普通的react js应用程序并使用browserrouter。我需要知道路线什么时候改变,我发现的唯一一件事就是 history package 同样的人(反应训练)。

他们的例子看起来很简单,但对我来说根本不管用:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()

console.log('a')
history.listen((location, action) => {
    console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
    console.log(`The last navigation action was ${action}`)
})


const A = props => <div>A <NavLink to="/b">b</NavLink></div>
const B = props => <div>B <NavLink to="/a">a</NavLink></div>

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/a" component={A}/>
            <Route path="/b" component={B}/>
        </div>
    </BrowserRouter>,
    document.getElementById('app')
)

控制台打印“A”,但是当我点击周围并且我的URL更改时,侦听回调永远不会被调用。

他们的文件里没有更多,所以有人知道遗漏了什么吗?

1 回复 | 直到 7 年前

sehrob 7 年前

如果你想用这种方式听路线的变化,我想你应该用 Router 不 BrowserRouter 把你的新创造 history 作为支柱。

以下是更改后的代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'

const history = createHistory()

history.listen((location, action) => {
     console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
     console.log(`The last navigation action was ${action}`)
})


const A = props => <div>A <Link to="/b">b</Link></div>
const B = props => <div>B <Link to="/a">a</Link></div>

ReactDOM.render(
  <Router history={history}>
    <div>
        <div>Hello!</div>
        <Route path="/a" component={A}/>
        <Route path="/b" component={B}/>
    </div>
  </Router>,
  document.getElementById('root')
)

这是我得到的控制台日志:

希望有帮助。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

6 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前