标签: react-router-v4

我正在构建一个 React 应用程序并使用 React Router 4。导航栏由左侧的链接和右侧的几个按钮组成（我们称之为右侧工具）。

导航栏是布局的一部分。现在这些按钮对于不同的页面是不同的。例如，我有 3 个页面仪表板、历史记录和管理。在 Dashboard 中有一个 Filter 按钮，History 会有 Filter、Download。管理员将没有按钮。

在 Angular 中，它们是 $state.current 但在 React router 中找不到类似的东西。

匹配 url 字符串是很痛苦的。有人对此有更好的解决方案吗？

我有以下代码：

import {Route, Switch} from 'react-router-dom';

<Route exact path="/" component={Landing} />
<div className="container">
  <Route path="/register" render={() => (
    <Register {...this.props} />
  )}/>
  <Route path="/login" render={() => (
    <Login {...this.props}/>
  )}/>
  <Switch>
    <PrivateRoute path="/dashboard" component={Dashboard}/>
  </Switch>
  <Switch>
    <PrivateRoute path="/create-profile" component={CreateProfile}/>
  </Switch>

用户登录（使用/login）后，他被重定向到/dashboard。但是，如果我<Switch>从 中删除/dashboard，用户仍然被重定向到/dashboard但该Dashboard组件不会被呈现。

那么它究竟是如何<Switch>工作的呢？

html标签“/href”和react-router提供的导航页面的navlink有什么区别？我可以使用两者来将页面导航到不同的 URL，那么为什么需要引入 Navlink 或 Link？

我有一个反应应用程序，使用托管在 S3 存储桶中的反应路由器，使用 Route53 作为 DNS 提供程序。该应用程序在 Route53 配置指向 S3 存储桶的情况下运行良好。

由于我想使用 SSL，我创建了一个指向存储桶的 Cloudfront 分配，带有 SSL 证书，并将 DNS 指向它。由于这样做，所有链接都无效（example.com 有效，但 example.com/foo 无效）。它只是返回一个 NoSuchKey 错误。我知道这是不正确的，因为钥匙肯定在那里，而且它以前是有效的。

有没有办法从反应应用程序的网址中删除查询字符串？

this.history.push('component/:id')

我希望在导航时从浏览器 URL 中删除 id。

使用 react router v4 和 Typescript 以编程方式导航时出错：

'Readonly & Readonly<{ children?: ReactNode; 类型上不存在属性“历史” }>

我想在 API 调用成功或失败时重定向到特定路径。但无法做到这一点。

路由器代码

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

class App extends React.Component<{}, {}>  {
 render()
 {
    <Router>
      <Switch>
          <Route exact={true} path='/' component={Login}/>
          <Route path='/home' component={Home}/>
          <Route path='/test' component={Test}/>
      </Switch>
    </Router>
  }
}
export default App;

成分

import { withRouter } from "react-router-dom";
import * as React from 'react';

class Test extends React.Component<IProps, IState> …

https://reacttraining.com/react-router/web/example/auth-workflow

我在 react-router-dom 文档中实现了私有路由

function PrivateRoute({ authenticated, ownProps }) {

    let {component:Component, ...rest} = ownProps


     //PrivateRoute, If  not authenicated ie  false, redirect
    return (
      <Route
      //  JSX Spread sttributes to get path for Route
        {...rest}
        render={() =>  authenticated ? (
            <Component />
          ) : 
          <Redirect
              to={{pathname: "/" }}
            />
        }
      />
    );
  }

  export default PrivateRoute

PrivateRoute 是一个从 Redux-Store 获取身份验证状态的连接组件。

我正在尝试使用 redux-mock-store 和从酶安装来测试连接的组件。

import configureStore from 'redux-mock-store'
const mockStore = configureStore()
const authStateTrue = {auth: {AUTHENTICATED: true}}; 

 test('Private path renders …

我正在尝试测试登录组件。具体来说，它会在成功登录时重定向。手动测试时它工作正常。但在我的测试中，它从不进行重定向，因此找不到“注销”链接：

test('successfully logs the in the user', async () => {
  const fakeUserResponse = {success: true, token: 'fake_user_token'}
  jest.spyOn(window, 'fetch').mockImplementationOnce(() => {
    return Promise.resolve({
      json: () => Promise.resolve(fakeUserResponse),
    })
  })
  const { getByText, getByLabelText, findByTestId } = render(<Router><Login /></Router>)

  fireEvent.change(getByLabelText(/email/i), {target: {value: 'dan@example.com'}})
  fireEvent.change(getByLabelText(/password/i), {target: {value: 'password1234'}})
  fireEvent.click(getByText(/submit/i))

  await waitForElement(() => getByText(/logout/i));
})

我正在使用react-router版本 4 进行重定向，如下所示：

{state.resolved ? <Redirect to="/" /> : null}

我会以错误的方式解决这个问题吗？