标签: react-router-v4

（为清晰起见更新）我的应用程序具有以下结构：

<Layout />
  /components/
    <Header /> 
    <Navigation />
    <Stage />
    <Footer />
  /pages/
    <Home />
    <About />
    <Contact />

我的想法是将<Navigation>元素隔离，并导入到父级<Header>（以及后来的站点地图）中。然后将所有组件暂存到父级中<Layout>，该父级被送入<div id="root">

我的 /pages/ 组件的内容被成功调用并使用以下代码呈现。但是，此页面内容呈现在我的<header>元素内部，打破了页面层次结构。

我的目的是让<Switch>设备在<Stage>父组件中呈现 /pages/组件。

任何将<Switch>元素移动到<Stage>组件的尝试都会导致整个应用程序无法加载/渲染。

import React from 'react';

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


import Home from './../pages/Home';
import About from './../pages/About';
import Contact from './../pages/Contact';

export default class Navigation extends React.Component {
  render() …

是否使用链接或this.props.history.push()地址栏中的URL正确更新,以及this.props.location在DOM树中较高的组件(在本例中为我的App组件).

但是,由于某种原因,它不会更新this.props.location我的组件,这些组件位于树的下方,这导致我的路由失败.

什么可能出错？

注意:我在这个项目中使用redux,但我没有改变this.props.history使用redux,至少目前是这样.我不认为这会影响任何事情,但如果是,请告诉我

编辑:如果它有用,这是DOM树的相关部分(我的电子邮件被仔细划掉).如您所见,Authenticated组件具有过时this.props.location(/plans),而App正确(/posts).两者都包含在路由器中.树下面的组件Authenticated也比错误的位置.

我在下面有一条加载仪表板组件的路线：

<Route
  path={`${match.url}/dashboard`}
  render={params => <Dashboard {...params} />}
/>

现在，我想添加一个可选参数，该参数仅在前面有附加路径（例如附加路径/:param）时才有效。我尝试了下面的代码，但没有得到可选参数的值：

<Route
  path={`${match.url}/dashboard/(filter/:filtername)?`}
  render={params => <Dashboard {...params} />}
/>

有人能告诉我下面的代码有什么问题吗？

我正在构建一个加密货币市场应用程序来练习 reactjs。当应用程序启动时，具有某些属性的货币列表将显示为列表。我需要导航到不同的页面（新页面 -货币组件）而不在当前页面底部加载组件。目前我能够在页面底部呈现它。但这不是我需要的。

除了Route to different page[react-router v4] 中提到的方法之外，还有其他方法吗？因为我需要将点击的对象（货币）传递给新的组件（货币）

这是我的CryptoList组件 currency_main.js

import React, { Component } from 'react';
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';
import Currency from './currency';
import {
  BrowserRouter as Router,
  Link,
  Route
} from 'react-router-dom'

class CryptoList extends Component {
  constructor(props){
    super(props);
    this.state = {
      currencyList : [],
      showCheckboxes : false,
      selected : [],
      adjustForCheckbox : false
    }
  };

  componentWillMount(){
    fetch('/getcurrencylist',
    {
        headers: {
          'Content-Type': 'application/json', …

我是React Router的新手,并且很难理解为什么我的实现不起作用.在DevTools中,似乎创建了嵌套路由,但是当我单击应加载它的链接时,整个页面将重新呈现为空白.我猜测链接的URL与路径的路径不匹配(虽然从屏幕截图中可以看出它们是相同的)或者可能是路由从未实际注册并测试过匹配？

Chrome Dev Tools中React输出的屏幕截图

我在ReportContainer组件的渲染中放置了一个断点,但它从来没有得到它.

应用

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { connect } from 'react-redux'
import styles from './App.css'
import { logout } from '../actions/user'
import { userIsAuthenticatedRedir, userIsNotAuthenticatedRedir } from '../auth'

import ProtectedComponent from './App.jsx'
import LoginComponent from './Login.jsx'
import Home from './Home'

const Login = userIsNotAuthenticatedRedir(LoginComponent)
const Protected = userIsAuthenticatedRedir(ProtectedComponent)


function App({ user, logout }) {
  return (
    <Router>
      <div className={styles.wrapper}>
        <div className={styles.content}>
          <Route exact path="/" component={Home}/> …

我正在使用 React Router 4 开发 React 应用程序（使用 Create React App）。在本地，一切正常，但是当我将它部署到 AWS（将它放在 S3 存储桶中，然后通过 Cloudfront 提供服务）时，它确实工作，但路线有问题。

这是 AWS 上有问题的用例：

• 而不是 root myapp.com，用户输入不同的路线，例如myapp.com/login然后尝试导航到该站点（当时不在该站点上）
• 用户收到NoSuchKey login错误

如果我在本地尝试相同的方法，则效果很好。此外，如果我首先在 AWS 上进入 root，然后导航到任何其他路线，它也可以正常工作。所以问题只是第一条路由，它必须是 AWS 上的 root 才能加载站点。我猜我的应用程序有问题，但我不确定是什么。

这是我的代码的一部分，用于来自被渲染的顶级组件的渲染方法的路由：

return (
  <Router>
    <Fragment>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/forgot-password" component={ForgotPassword} />
      <Route path="/signup" component={SignUp} />
      <Route path="/help" component={Help} />
    </Fragment>
  </Router>
);

有任何想法吗？

我正在开发一个普通的React JS应用程序并使用BrowserRouter。我需要知道路线何时更改，而我发现的唯一内容是使用同一个人的历史记录包（反应训练）。

他们的例子看起来很简单，但对我来说根本不起作用：

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时，永远不会调用监听回调。

他们的文档中没有更多内容，所以有人知道缺少什么吗？

我的React路由定义如下：

...
<Route component={Header} />
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Footer} />
...

我想定义一个“全部捕获”路由，以捕获与着陆，“关于”或“联系”路由不匹配的所有内容，而是重定向到“ 404找不到”页面。我该如何使用React Router 4？

Delay = (e) => {
    e.preventDefault()
    setTimeout(() => {
        e.unpreventDefault() //make this work
    },500)
}

render() {
    <NavLink
        to='/About'
        onClick={this.Delay}
    >
        Delay Me!
    </NavLink>
}

单击 NavLink 后，我想在转到“/关于”之前等待 500 毫秒。我怎么做？

编辑：我想使用 NavLink activeStyle 属性

在我的React App中，我有3个组件。从第一个组件的按钮开始，我使用链接转到第二个组件。在第二处，我创建了一个状态（redux存储），对其进行了操作，并在完成操作后通过提交按钮将我重定向到第三处。在第三个组件上，我还看到了状态（通过redux chrome工具），但是在这里，当我刷新页面（更改并保存代码时的webpack事情）时，我失去了状态并得到了一个空的Object。

这是我的应用程序的结构。

index.js

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

const App = ({ location }) => (
  <Container>
    <Route location={location} path="/" exact component={HomePage} />
    <Route location={location} path="/GameInit" exact component={GameInit} />
    <Route location={location} path="/Battle" exact component={Battle} />
  </Container>
);

App.propTypes = {
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
};

export default App;

在主页上，我有一个链接到GameInit的按钮

const HomePage = () => (<Button color="blue" as={Link} to="/GameInit">START GAME</Button>);
export default HomePage;

和GameInit页面看起来像 …