标签: react-router-v4

对于页面具有内部路由的用例，即使导航到可能不需要提示的内部路由，提示也会触发，请参见代码示例。导航到已知的安全路线时，是否可以禁用提示？

import React, {Component} from 'react';
import {BrowserRouter, Route, Switch, Link, Prompt} from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route component={About} path={"/about"}/>
          <Route component={Home} path={"/"}/>
        </Switch>
      </BrowserRouter>
    );
  }
}

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {input: 'hello?'}
  }

  render() {
    return (
      <div>
        <h1>Home</h1>
        <input value={this.state.input} 
          onChange={(e) => this.setState({input: e.target.value})}/><br />
        <Link to={"/info"}>More Info</Link><br />
        <Link to={"/about"}>About Page</Link><br />

        {/*Triggers even when going to /info which is …

在完成一些验证后,如何移动到新页面React Router V4？我有这样的事情:

export class WelcomeForm extends Component {

    handleSubmit = (e) => {
        e.preventDefault()

        if(this.validateForm())
            // send to '/life'

    }
    render() {
        return (
            <form className="WelcomeForm" onSubmit={this.handleSubmit}>
                <input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
            </form>
        )
    }
}

我想将用户发送到另一条路线.我看了一下Redirect,但似乎它会删除我不想要的历史记录中的当前页面.

问题:更改<Route />组件的参数不会更新它正在呈现的组件.路径更改显示在URL栏中,但直接呈现{this.props.match.params.id}显示旧:idURL而不是URL栏中反映的新值.

更新:我通过将<BrowserRouter />index.js文件中的out移出到App.js文件中来解决此问题.它不再是Provider的直接子节点,而是App组件的子节点.不知道为什么这会让一切都突然发挥作用.

我在做什么:我有一个<Link to="/user/11" />从user/7(或任何当前的ID)到a/user/11

将componentWillReceiveProps(newProps)它呈现不发射,该成分(此元件使用连接react-redux有没有什么帮助任何.我试图将withRouter周围的连接,并没有帮助)

如果我在chrome中手动刷新页面(使用CTRL-R或刷新按钮),页面将显示新数据,呈现"新"参数.

TLDR:从切换/user/7到/user/11不会触发该componentWillRecieveProps功能,从而使组件显示旧状态

问题:我在这里做错了什么导致componentWillReceiveProps不开火.

我正在使用react-router v4和最新的create-react-app

这是我的CWRP功能:

componentWillReceiveProps(newProps) {
  console.log("getProps")

  this.props.getUser(newProps.match.params.id)

  if (newProps.match.params.id == newProps.currentUser.id) {
    this.setState({ user: "currentUser" })
  } else {
    this.setState({ user: "selectedUser" })
  }
}

这是我的组件的完整代码:https://gist.github.com/Connorelsea/c5c14e7c54994292bef2852475fc6b43

我在这里遵循解决方案,它似乎对我不起作用.路径参数更改时,组件不会重新装入

需要<base href=""/>根据构建环境配置设置标记的href值.

例如:

分期应该有 <base href="/staging" />

产品应该有 <base href="/" />

目前的设置:

构建命令:

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",

"build:staging": "REACT_APP_ENV=staging npm run build",

"build:prod": "REACT_APP_ENV=production npm run build",

.env.staging.js:

REACT_APP_BASE_HREF=/staging

index.html的:

....

<base href="" + process.env.REACT_APP_API_URL />

....

这在index.html中似乎不起作用.虽然类似的设置适用于JS文件

(可能是因为JS文件被解析并捆绑到一个文件中,并且捆绑器在那个时间点读取值)

事情尝试:

index.html的:

<base href=process.env.REACT_APP_API_URL />

<base href="process.env.REACT_APP_API_URL" />

<base href="%process.env.REACT_APP_API_URL%" /> (类似于PUBLIC_URL变量)

设置basename属性以及浏览器路由器也无法解决问题

我正在使用React Router v4创建一个React/Redux应用程序.它有一个简单的架构

--RootPage    path /
 --HomePage   path /h
   -Gallery   path /h/portfolio
   -Links     path /h/links
   -About     path /h/about

现在,每次刷新,如果我在二级/ h /组合,或/ h /链接,或/ h/about,这个错误net :: ERR_ABORTED.

如果我在根级别或/ h /级别,刷新工作正常.我已经添加historyApiFallback: true到devServer所以它不是那个问题.每次刷新时都必须始终转到/ root是没有用的.这可能有什么问题？

这是我的路线

const mainRouter=(
    <Wrapper>
<Provider store={store} history={history}>
  <BrowserRouter>
      <div>
      <Route exact path="/" component={Home}/>
      <Route path="/h" component={HomePage}/>
       </div>
   </BrowserRouter>
    </Provider>
    </Wrapper>
  )

并在HomePage

       <main>
          <Route path={`${this.props.match.path}/portfolio`}
          render={ ()=><Gallery {...this.props}/> } />
          <Route path={`${this.props.match.path}/about`} render={ ()=><About 
          {...this.props}/> }/>
          <Route path={`${this.props.match.path}/links`} render={ ()=><Links 
          {...this.props}/> }/>

      </main>

我正在做我的应用程序做出反应一个SPA和增加React Router 4与react-router-dom它。当前，我到home组件的入口点如下所示：

render (
    <Provider store={store}>
        <App>
            <Home />
        </App>
    </Provider>,
    document.getElementById('app')
);

对于另一个模块，我有一个不同的入口点，而不是组件，我有一个不同的入口点，<Home />但是其余的看起来几乎相同。

两个问题：

1. 是否<BrowserRouter>应该换个方向<Provider store={store}>或其他方式是否重要？看起来好像react-router-dom不使用redux存储，但我仍然认为<Provider>应该包装<BrowserRouter>-参见下面的代码。
2. 我还要删除“ Home”组件，因为路由器将根据URL决定加载哪个组件。

这是新的代码：

render (
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('app')
);

我处理这个权利吗？

我已经阅读了有关react-router交换机的文档

我了解有关交换机和路由的定义

但是还是有些不明白

如果我只想选择一条路线进行渲染，我们将使用Switch

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
</Switch>

我无法理解的一点是，没有Switch我就能获得相同的效果

 <Route exact path="/" component={Home} />
 <Route path="/a" component={A} />
 <Route path="/b" component={B} />

那么，为什么要使用Switch？我们什么时候需要使用Switch？

我发现需要使用Switch的情况

如果我想在没有路径匹配时渲染特定的组件

我们需要像这样将Route包装在Switch中

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route component={SpecificComponent} />
</Switch>

我对吗 ？

我有一个父组件，当URL匹配某个路径时，该父组件应呈现另一个组件：

const View: React.SFC<Props> = ({
 ....
}) => {
  return (
    <div>
        ....
      <Route path={jobPath} component={JobPanel} />} />
    </div>
  );
};

JobPanel.tsx将渲染是否jobPath === /careers/:id全部正常。

JobPanel.tsx 的链接当前会返回 this.props.history.push(/careers)

<BackLink
  to="/company/careers"
  onClick={(e: any) => { handleClose(); }}
>
  <StyledChevron orientation={Orientation.Left} />
  Go Back
</BackLink>

要么

<BackLink
  onClick={(e: any) => { this.props.history.push('/careers/); handleClose(); }}
>
  <StyledChevron orientation={Orientation.Left} />
  Go Back
</BackLink>

问题在于，JobPanel应该使用此组件在页面内外过渡：

class JobPanel extends Component {

render() {
  const { isOpen, handleClose, job } = this.props;
      return ( …

我已经编写了一个简单的搜索组件，在响应中带有自动建议，它调用themoviedb。我正在使用react-router-dom并在app.js中定义了这样的路由参数：

<Route path="/:id" component={SomeComponent} />

搜索组件如下所示：

import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import axios from "axios";

const SuggestionsResult = styled.ul`
  text-decoration: none;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 100%;
`;

const ResultItem = styled.li`
  border-bottom: 0.0625rem solid hsla(0, 0%, 100%, 0.12);
  padding: 10px 0 10px;
  padding-left: 2px;
  font-size: 1em;
  cursor: pointer;
  &:hover {
    background: hsla(0, 0%, 100%, 0.12);
  }
`;

export default class Search extends …

我在Web和SO上搜索了很多内容，在reactiflux聊天中询问，但是没有找到一种干净的，没有漏洞的方法来根据路径/路径呈现某些组件。

假设我有<Header />应该显示在某些页面上的内容，应该在其他页面上隐藏的内容。

确保可以在Header组件中使用此字符串

if (props.location.pathname.indexOf('/pageWithoutAHeader') > -1) return null

如果/pageWithoutAHeader是唯一的，那完全没问题。如果我需要5页具有相同的功能，它将变为：

if (props.location.pathname.indexOf('/pageWithoutAHeader1') > -1) return null
if (props.location.pathname.indexOf('/pageWithoutAHeader2') > -1) return null
if (props.location.pathname.indexOf('/pageWithoutAHeader3') > -1) return null

是的，我可以将路由存储在数组中并编写一个循环，这将更可重用代码。但这是处理此用例的最好，最优雅的方法吗？

我认为这甚至可能是错误的，例如，如果我不使用路由呈现页面的标题，/xyz而我却使用带有UUID的路由，例如/projects/:id和id=xyzfoo，/projects/xyzfoo则不会显示标题，但应该显示标题。