标签: react-router-v4

我正在尝试路由一条带有中间参数的路径。这是我的路线的样子。

import Events from "./views/EventsView";
import Event from "./views/EventView";
import NotFound from "./views/NotFoundView";
import RegistrationView from "./views/RegistrationView"

export default [
  {path: "/", component: Events, exact: true},
  {path: "/events", component: Events, exact: true},
  {path: "/events/:projectId", component: Event, exact: true},
  {path: "/events/:projectId/register", component: RegistrationView, exact: true},
  {component: NotFound}
]

然后我将我的路线映射到 a <Switch>which 中 a 中<Router>。

<Switch>
    {
        return routes.map(({path, component, exact}, key) =>
            <Route key={key} path={path} component={component} exact={exact}/>)
}
</Switch>

我Link用来访问Event组件。

<Link to="/events/1234">Title Here</Link>

问题 …

我正在使用react-router v.4，我想执行一些返回功能。

我当前的代码如下所示：

<HashRouter>
       <Switch>
            <Route exact path='/' component={Main}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/traineeships' render={()=>(<Traineeship rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/information-filter' render={()=>(<InformationFilter rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/find-work' render={()=>(<FindWork rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/information-job' render={()=>(<InformationJob rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Redirect from='*' to='/' />
       </Switch>

我this.props.history.go(-1)在其他组件上尝试了几个选项，但我遇到了未定义的错误。

任何人都知道如何在我的情况下执行返回功能？

我刚开始使用 React Router v4，无法使用 Browserrouter 的历史记录。例如，当我尝试访问时this.props.history.push("/")出现错误：

TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

我正在将 React Router v4 与 Browserrouter 一起使用，并将 React 与 Typescript 一起使用。来自 React Router 的 Route 的三个道具（位置、历史、匹配）似乎没有传递给它的组件。 我在 Typescript 或 React Router 上做错了什么吗？

索引.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import {
    BrowserRouter as Router, Route
} from 'react-router-dom';
import Login from "./Login";
import Questionnaire from "./Questionnaire";
import Registration …

我正在使用react 16and react router 4, webpackand webpack dev server。

我确实有以下几点Route：

<Route path="/company/:symbol" render={this.getCompanyPageRoute} />

我确实通过以下方式导航到这条路线：

this.props.history.push('/company/blablabla');

一切正常。但是，如果我使用此 URL 刷新页面，则会出现以下错误：

未捕获的语法错误：意外的标记 <

我已经看到有几个关于这个错误的帖子，但我并没有按照这些链接来解决这个问题。

如果未找到路线，我正在尝试呈现“未找到”页面。我将路线分成模块。因此，当我执行 switch 语句时，在 switch 的底部添加未找到的页面，例如：

const AccessRoutes = () => {
return (
    <React.Fragment>
        <Route path="/login" exact component={Login}/>
        <Route path="/register" exact component={Register} />
        <Route path="/forgot-password" exact component={ForgotPassword}/>
    </React.Fragment>
       )
}
export default () => {
    return (
     <Switch>
         <AccessRoutes/>
         <Route render={() => <div>Not found</div>}
     </Switch>
    )
}

当您输入不在 上的路径时，未找到的路径永远不会匹配AccessRoutes，例如/hey显示空白屏幕。如果我放置路由而不将它们包装在另一个组件中，它就可以工作。

我缺少什么？

我正在使用 react-router Link 组件使用/customers/${id}. 链接导航到正确的组件，但不是将 ${id} 转换为其值，而是将其作为文本传递，如下所示：' /customers/$%7Bid%7D'。

我正在使用反应路由器 4.3.1

我正在学习 React 并且正在创建一个简单的主/详细 web 应用程序。我已成功从我的 API 检索数据并将其呈现为列表。我希望能够单击列表中的项目并导航到将唯一 ID 作为参数传递的详细信息组件。

我尝试了各种方法，但基本上，${}无论我尝试什么，我都无法开始工作。我试图用谷歌搜索这个问题，但没有找到任何有类似问题的人。我已经阅读了许多关于如何使用 react-router v4 设置路由的文章，并且正在关注这些但遇到了这个问题。

如果我尝试手动传入链接，则路由可以正常工作，并且可以正确导航到呈现特定客户的详细信息组件。

<Link to={'/customers/${this.props.item.Id}'}>{this.props.item.Name}</Link>

路线如下所示：

<Route path='/customers/:Id' component={CustomerDetails} />

我希望链接生成以下 URL：/customers/3但实际结果是/customers/%7Bthis.props.item.Id%7D 变量名称拼写正确。

我是新手，仍在学习。我正在尝试在我的 React 项目中添加嵌套路由，以便 div 的内容根据路由而变化。

以下是我的组件：-

//index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

library.add(faIgloo);

ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();


// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'



import './App.css';

class App extends Component {

  render() {
    return (
        <Switch>
          <Route exact path="/protected" component={Protected}/>
          <Route path="/login" component={Login}/>
        </Switch>
    );
  }
}

export default …

我正在尝试学习“react-router”，我正在制作一个应用程序，它有一个输入字段，为您提供一个下拉列表，其中包含欧洲各个火车站的链接，当您单击该链接时，它将呈现一个组件，在此封装Station组件并显示有关该站的更多详细信息。

对于此应用程序，我必须对外部 API 进行两次调用。第一个是找到火车站并将其显示在下拉列表中。这是有效的，从那里我可以获取电台的名称并将其放入下拉列表中，我还获得了一个id用于查询第二个 API 以获取电台的详细信息的名称。当用户单击下拉列表中的电台时，就会发生这种情况。这现在有效。我的问题是，当用户单击下拉列表中的电台时，我已经丢失了电台的名称。我想以某种方式将其传递给车站组件。

这是我的车站组件：

const Station = (props) => {
 return (
  <h1>Station name: {props.location.state.name}</h1>
 )
}

export default Station;

这是下拉组件，为了简单起见，我对两个电台进行了硬编码以尝试使其工作，否则下拉列表是与用户查询匹配的电台列表。

const Dropdown = (props) => {

return (
<ul>
  <li>
    <Link to={'/station/London'} key="lon" state={{name: 'London Central Station'}}>London </Link>
  </li>
  <li>
    <Link to={'/station/Paris'} key="par" state={{name: 'Paris Central Station'}}>Paris</Link>
  </li>
</ul>
  )
  }

export default Dropdown;

我尝试使用组件state中的 prop传递站名称Link，但是当Station组件安装时，该名称props.location.state是未定义的。

最后是我的路线：

const Details = (props) => {
return …

我是反应新手。我在 App.js 中有这样的反应路由器配置：

<BrowserRouter>
    <div className="App">
      <Header />
      <Switch>
        <Route exact path="/" component={Home}>
        </Route>
        <Route exact path="/management" component={Management}>
        </Route>
        <Route exact path="/sign-up" component={SignUpForm}>
        </Route>
        <Route exact path="/sign-in" component={SignInForm}>
        </Route>
        <Route component={Error}>
        </Route>
      </Switch>
    </div>
  </BrowserRouter >

我希望每个页面都显示标题，标题处有一个注销按钮，我想在单击它后重定向到/登录页面。在我的标头组件中，它是这样的：

class Header extends Component {
constructor(props) {
    super(props);
    this.state = {
        redirect: false
    }

}
logout = () => {
    sessionStorage.setItem("userToken", '');
    sessionStorage.clear();
    this.setState({ redirect: true });


}
render() {
    if (this.state.redirect) {
        return (
            <Redirect to={'/sign-in'} />
        )
    }


    return (
        <div> …

我整天都在扯头发，试图让它发挥作用。我注意到的是，无论出于何种原因，过渡类 (classNames="fade") 永远不会应用于页面元素。因此，当我从一个页面导航到另一个页面时，两个页面组件都会在短时间内（超时时间）显示。

我应该在 600 毫秒内拥有什么...

<div class="RTG"> 
    <div class="page fade-appear fade-enter fade-enter-active"> <!-- 
destination component HTML --></div>
    <div class="page fade-exit fade-exit-active"> <!-- start component HTML --></div>
</div>

我得到的是..

<div class="RTG">
   <!-- "fade..." classes never applied to the child nodes" -->
   <div class="page"> <!-- destination component HTML --></div>
   <div class="page"> <!-- start component HTML --></div>
</div>

然后在 600 毫秒超时后，我只剩下......

<div class="RTG">
   <div class="page"> <!-- destination component HTML --></div>
</div>

注意 1：我将“RTG”类名放在 TransitionGroup 组件上，只是为了验证我的“页面”类组件实际上是 TransitionGroup 组件的直接后代。不存在任何其他原因。

注意 2：我使用的是 react-transition-group@2.4.0，因为我与最新版本存在兼容性问题。 …