标签: react-router-v4

我有以下代码:

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


const Routes = () => (
  <Router basename="/blog">
    <div>
      <Header />
      <Route exact path="/" component={Main}/>
      <Route path="/article/:id" component={ArticleView}/>
    </div>
  </Router>
)

我可以通过Main和ArticleView组件中的props访问历史记录或匹配.但我无法访问它<Header />.有没有办法在Header组件中获取历史对象？

我的高阶组件有问题.我试图从<Layout />路由中的组件传递道具(React Router v4).路由中指定的组件由HOC包装,但我传递的道具永远不会到达组件.

另外,我不能在不使用的情况下使用HOC export default () => MyHOC(MyComponent).我无法弄清楚为什么,但这可能与它有关？

Layout.js

const Layout = ({ location, initialData, routeData, authenticateUser }) => (
  <Wrapper>
    <Container>
        <Switch>
          // how do I get these props passed through the HOC? render instead of component made no difference.
          <Route exact path="/pages/page-one" component={() => <PageOne routeData={routeData} title="PageOne" />} />
          <Route exact path="/pages/page-two" component={() => <PageTwo routeData={routeData} title="PageTwo" />} />
          <Route component={NotFound} />
        </Switch>
    </Container>
  </Wrapper>
)

export default Layout

Page.js

// I've tried …

我正在尝试使用https://github.com/facebook/prop-types

所以我也为它安装了@ types/prop-types.https://www.npmjs.com/package/@types/prop-types

但我想这个错误.[ts]模块'"/ node_modules/@ types/prop-types/index"'没有默认导出.

我想要完成的是在withRouter文档中做了什么. https://reacttraining.com/react-router/web/api/withRouter

例如,您在JavaScript中看到PropTypes的使用:

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is …

一旦我进行查询参数更改,我不确定为什么它显示默认路由.这种问题有更好的方法吗？也许我不应该使用查询参数？开放接受教育!

版本"反应":"^ 16.2.0","react-dom":"^ 16.2.0","react-router":"^ 4.2.0","react-router-dom":"^ 4.2. 2" ,

测试用例 https://codepen.io/adamchenwei/pen/YeJBxY?editors=0011

重现的步骤单击主页 - >步骤1

预期行为转到步骤1以及步骤2呈现正确的dom

实际行为为空,页面上没有任何呈现

// For this demo, we are using the UMD build of react-router-dom
const {
  BrowserRouter,
  Switch,
  Route,
  Link
} = ReactRouterDOM

const {
  Component,
} = React;

const Router = BrowserRouter;

const Step1View = () => (
  <div>
    <h1> Step 1</h1>
  </div>
)

const Step2View = () => (
  <div>
    <h1> Step 2</h1>
  </div>
)

class Home extends Component {
  constructor(props) {
    super(props);
    console.log('-!!!')
    this.state …

我是新的反应世界并添加了路由器v4但无法实现反应角色基础授权.让我知道是否有任何来源让我采取正确的方式.

假设我有一个如下所示的路由切换语句:

render () {
    <pre>
        <Switch>
            <Route path="/foo" render={render}>
            <Route path="/bar" render={renderBar}>
            <Route path="/" render={renderHome}>

            {/* How do i express everything except the home page ?*/}

            <Route render={renderFourOhFour}>
        </Switch>
    </pre>
}

除了给出上面例子的主页之外,我如何编写一条排除所有内容的路径？我只是写一个正则表达式吗？如果是这样,我尝试了类似的东西

path={^(?!.*(home))}

与正则表达式反应路由器v4测试器:https://pshrmn.github.io/route-tester/#/

目前我有这个路由结构：

//主.js:

 <Router>
    <Switch>
        <Route exact path='/' component={AuthApp}/>
        <Route path='/app' component={ContentApp}/>
    </Switch>
</Router>

我的 ContentApp 中需要一些内部导航：

//ContentApp:
<Route exact path={`${match.url}/`} component={Content}/>
<Route exact path={`${match.url}/something`} component={Something}/>
<Route exact path={`${match.url}/else`} component={Else}/>
<Route exact path={`${match.url}/blahblah`} component={BlahBlah}/>

还有一些ofc的导航：

//Header.js
<NavLink exact to='/app' >Dashboard</NavLink>
<NavLink to='/app/something' >Something</NavLink>
<NavLink to='/app/else' >Else</NavLink>
<NavLink to='/app/blahblah' >BlahBlah</NavLink>

事情是这样的：它工作得很好，但是第一个链接始终保持活动状态。谁能建议我如何解决这个问题？谢谢

哪个HOC将包装另一个.包含多个HOC的顺序是否有反应？我已经创建了多个带有Socket,withLoadingBar等的HOC.我是否应该担心深度丑陋的嵌套,它会对组件的性能产生影响吗？

官方 github页面react-router-redux说该项目已不再维护,现已弃用.他们建议connected-react-router改用. react-router-redux有:
31k星884观看
6k叉,
而connected-react-router只有:
1053星
28观看
108叉

我正在开始使用react v4开发一个完整的Q/A社交网站,connected-react-router在这里使用它是值得的还是聪明的想法？

在发布问题时,我发现stackoverflow甚至没有connected-react-router标记.

我有两个<Route>用react-router创建的.

• / cards - >卡片游戏列表
• / cards/1 - >纸牌游戏#1的详细信息

当用户点击"返回列表"时,我想滚动用户在列表中的位置.

我怎样才能做到这一点？