标签: react-router-dom

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

<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() …

可以说我们有两个用于Post和Project的组件。每个职位和项目都有。我想通过子弹访问帖子和项目。所以我们有路线：

<Route path="/:post_slug" component={PostComponent} />
<Route path="/:project_slug" component={ProjectComponent} />

例如，当您访问某个后期项目时，将调用一个操作以通过参数获取其数据。像这样：

this.props.fetchPost(this.props.match.params.post_slug)
this.props.fetchProject(this.props.match.params.project_slug)

如果我只执行一个只能通过子段访问的组件，则它可以工作。但是，如果我想通过访问来访问两个不同的组件，那就搞砸了。即，当我访问帖子时，React认为我正在访问项目。

在react-router-dom中也许有某种方法可以处理这种情况？

我正在构建一个加密货币市场应用程序来练习 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', …

我无法让 Symfony 4 在 SPA 设置中正常工作。

具体来说，当我使用 React-router 链接导航时，一切正常。

但是，如果我尝试直接访问任何路由（除了 home ），Symfony 会拦截它，当然，会为找不到路由引发错误。

将 Symfony 放在子域中并将其仅用作 API 的替代方案是不可行的，因为我需要框架提供的所有用户和会话管理工具。

当然，我将需要 Symfony 的所有 API 调用路由到后端。

我正在使用 Symfony 4 的默认目录结构，只在顶层为所有 react/redux 代码添加一个目录 /client。

构建代码放在 /public/build 下。

我还尝试使用以下代码在 /public 上放置一个 .htaccess 文件，但这没有帮助。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

谢谢

我是 React JS 的新手，我在处理 onClick 事件时遇到了一些麻烦。我尝试了很多东西，但由于我是新手，我肯定错过了一些东西。我正在使用带有 react-router-dom 的 codeandbox。

这是我的代码，我试图删除不需要的部分。

class Game extends React.Component {
  state = { selectedCharacters: [], minPlayer: 10, };
  selectCharacter = clickedCharacter => {
    this.setState(prevState => ({
      selectedCharacters: prevState.selectedCharacters.concat(clickedCharacter)
    }));
  };
  render() {
    const { selectedCharacters } = this.state;
    return (
      <div>
        <CharactersSelection availableCharacters={this.props.availableCharacters} selectedCharacters={selectedCharacters}          selectCharacter={this.selectCharacter}/>
      </div>
    );
  }
}

const CharactersSelection = props => {
  return (
    <div>
      <div className="row">
        <div className="row justify-content-center">
          {props.availableCharacters.map((char, i) => (
            <CharacterCardSelection
              imgName={char.imgName}
              name={char.name}
              maxInGame={char.maxInGame}
              onClick={() =>props.selectCharacter(char)}
            />
          ))} …

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 属性

我正在使用create-react-app和制作一个反应应用程序react-router-dom 4。我的问题是，当我加载默认“/”以外的 URL 时，相对路径会被添加到正在发出的请求中。

例如，如果我进入mysite.com/templatesurl 搜索栏，我的 fetch 请求会fetch("templates/item.json")请求 url:mysite.com/templates/templates/item.json但如果我从主页导航到/templates使用Linkreact-router-dom 中的 组件，则情况并非如此。

有什么方法可以避免在获取请求之前添加相对路径？

我有一些有效的代码。它立即将用户从/test页面重新路由到FinishedPaying页面。是这样的：

class Test extends Component {
  renderRedirect = () => {
      return <Redirect to="/FinishedPaying" />;
  };
  componentDidMount() {
    this.renderRedirect();
  }
...

以下代码用于发送Paypal交易，然后将用户路由到/FinishedPaying页面。所有其他逻辑都按预期工作：

export default class Pay extends React.Component {
  state = {
    userInput: ""
  };
  renderRedirect = () => {
      return (
        <Redirect
          to="/FinishedPaying"
          userInput={this.state.userInput}
        />
      );
  };
  componentDidMount() {
    this.setState({ userInput: this.props.userInput });
    this.renderRedirect();
  }

  render() {
    const onSuccess = payment => {
      axios
        .post(
          "http://amazonaws.com:3000/ethhash",
          {
            userInput: this.props.userInput,
          }
        ) …

在过去的几天里，我一直试图让我的嵌套路由正常工作，我不得不说我完全迷失了。

我正在尝试使以下功能正常工作：

1. 带有多个链接的侧边栏。其中之一通向 /banking。
2. /banking 默认情况下{ BankingCards }在{ CardWrapper }.
3. 当用户单击<Link>由 呈现的 4 张卡片之一时{ BankingCards }，我想将嵌套路径呈现在同一个{ CardWrapper }.

在下面的代码块中，您会注意到我尝试使用 switch 语句将组件动态分配给actionComponent. 这似乎以不止一种方式破坏了功能。

这是错误的方法，还是我错过了有关 React Router 组件的某些内容？

// Banking.js

import CardWrapper from '../../Wrappers/CardWrapper/CardWrapper';
import BankingCards from './BankingCards/BankingCards';
import AddBank from './AddBank/AddBank';
import AddDebit from './AddDebit/AddDebit';
import AddCredit from './AddCredit/AddCredit';
import AddDirect from './AddDirect/AddDirect';

class Banking extends Component {
  state = {};

  render() {
    const { match } = this.props; …

我在每条路径上都显示组件有问题，因为React Router 4没有对该路由使用确切的路径（或因此出现）。

<Route path="/" exact component={Explore} />
<Route path="/about" component={About} />

// The one making problems
<Route
    path="/:username"
    exact={true}
    render={props => <Profile {...props} />}
/>

因此，当我转到http://example.com/about时，我的Profile组件仍在呈现中。我猜问题出在路由中，因为它期望参数，:username并且在/（root）之后就出现了。难道我做错了什么？我可以为添加一条其他路线/:username，例如/profile/:username，但如果可能的话，我希望保持原样。