标签: react-router-dom

当我尝试使用<Route />组件时遇到一些奇怪的警告。请注意<Route exact={"true"} .../>代码示例中描述的产生奇怪浏览器警告的一行。

ReactDOM.render(
    <Provider store={appStore}>
        <ConnectedRouter store={appStore} history={history}>
            <BrowserRouter>
                <Switch>
                    <Route exact={"true"} path="/" component={App}/>
                    <Route render={() => <h1>404, not found</h1>} />
                </Switch>
            </BrowserRouter>
        </ConnectedRouter>
   </Provider>,
document.getElementById('root'));

浏览器控制台接下来告诉我：

警告：失败的道具类型： 提供给预期的无效道具exact类型。在路线中（位于 src/index.tsx:19）index.js:1452stringRouteboolean

上一个警告之后的以下警告与文本逻辑完全一致

警告：收到true非布尔属性exact。

如果要将其写入 DOM，请传递一个字符串：exact="true" 或exact={value.toString()}。在 a（由 Context.Consumer 创建）中 在 Link（在 App.tsx:25）中 在 header（在 App.tsx:11）中 在 div（在 App.tsx:10）中 在 App（由 Context.Consumer 创建）中 在 Route 中（在 src/index.tsx:19）在 Switch 中（在 src/index.tsx:18）在 Router（由 BrowserRouter 创建）中 在 BrowserRouter 中（在 src/index.tsx:17）在 …

函数组件不支持 contextType。

我在尝试向用 React RouterwithRouter(...)函数包装的 React 组件添加上下文时遇到问题。

import React, { Component } from 'react'
import UserContext from './UserContext'
class Toolbar extends Component {
  render(){
    return (
      <div>username: this.context.username</div>
    )
  }
}
Toolbar.contextType = UserContext
export default withRouter(Toolbar)

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

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

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

我正在制作一个网站，我在其中使用 react-router-dom 的 NavLink 组件来防止单页应用程序体验的重新渲染。

当我试图使站点具有响应性时，我一直在尝试在选择 NavLink 后使响应式导航栏从 react-bootstrap 崩溃，但是 collapseOnSelect 行为似乎不适用于除 Nav.Link 组件以外的任何其他组件与反应引导。

其他解决方案建议使用手动切换功能等将道具传递给导航 (navExpanded:true)，但这似乎仍会由于状态更改而强制重新渲染。我想避免这种情况的主要原因是我使用 react-transitions-group 在页面之间进行了转换。

<Navbar collapseOnSelect expand="md" variant="dark">
    <Container>
        <Navbar.Brand href="/"><Logo/></Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="Navs ml-auto">
                <NavLink className="nav-link" to="/about">ABOUT</NavLink>
                <NavLink className="nav-link" to="/portfolio">PORTFOLIO</NavLink>
                <NavLink className="nav-link" to="/contact">CONTACT</NavLink>
            </Nav>
        </Navbar.Collapse>
    </Container>
</Navbar>

任何帮助将不胜感激！

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 …

链接在构建后不起作用，但它在 localhost:3000 中有效

我使用 react-router-dom 组件

使用以下方法构建项目：

npm run build

应用程序.js：

    return (  
      <div>
        <Router >
          <Header/>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route path="/join" component={Join}/>
              <Route path="/advertisement" component={Advertisement}/>
              <Route path="/contact" component={Contact}/>
              <Route path="/details" component={Details}/>

        </Router>
      </div>
    );
  }

和其他组件中的链接：

<ul>
    <li><Link to='/'>home</Link></li>
    <li><Link to='/about'>about us</Link></li>
    <li><Link to='/join'>join</Link></li>
    <li><Link to='/advertisement'>ads</Link></li>
    <li><Link to='/contact'>contact us</Link></li>
</ul>

包.json

"homepage": ".",

我有一个想法来定义location.state某个无状态组件可以是什么类型。我找到了一些基于该RouteComponentProps类型的文章，但我无法弄清楚细节。

假设在这个例子中，我希望location.state属性的类型是

type StateType = {
    id: number,
    type: number
}

或者让 type` 甚至是一个枚举。这能实现吗？

import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
const Index = ({ location, history }) => {
    return (
        <div>Test</div>
    )
}

export default withRouter(Index)

我正在使用 React (16.12.0) 和 PhpStorm (2019.3.1)。

我导入的包是 react-router-dom (5.1.2)

我将编写以下导入：

import { NavLink, Switch } from "react-router-dom";

这两个包都由 webpack/babel 正确导入，并且当我同时使用 Switch 和 NavLink 时，页面会正确呈现。

然而，纯粹从 IDE 的角度来看，我收到了关于 Switch 的警告： Cannot resolve symbol 'Switch'

这很奇怪，因为它显然就在那里，我登记入住/node_modules/react-router-dom并Switch.js在那里。

奇怪的是在之前版本的 PhpStorm 上（在几次更新和插件导入和其他更改之前），PhpStorm 准确地找到了 Switch 导入。

我最近没有更新 react-router-dom 并且正在使用其最新的稳定版本。

关于为什么可能缺少 Switch 的任何想法？

编辑： 我意识到这可能是因为 PhpStorm 难以导入 commonJS 模块。

我尝试将 Javascript 编译方法从 React JSX 更改为 ECMA 6。那没有用。

我还尝试为 react-router-dom 导入一些构建库，这有助于Route奇怪地识别导入但不是Switch.

我还尝试使 PhpStorm 缓存无效并重新启动应用程序，但这也不起作用。

编辑 2： 根据答案，当我的光标在其中时，我尝试使用 option+enter（Windows 上的 alt+enter） …

我正在使用react-router-domv 5.2.0。我想在 URL 中添加多个查询参数，但我不确定如何完成它。我的路线是这样的：

<Route path="/admin/users" component={UserList} />

我想传递多个查询参数，例如...

/admin/users?search=hello&page=1&user_role=admin

目前我正在手动进行，例如...

/admin/users?search=hello&page=1&user_role=admin

但是，使用此手动操作，我无法连接多个查询参数。有没有办法动态连接查询参数？它react-router-dom有自己的做这些事情的方式吗？

在早期版本中，我们可以使用history返回到之前的路线。

history.goBack()