标签: react-router-dom

我注意到当我在 /users/:id1 链接上尝试访问新的用户个人资料页面 /users/:id2 时，它不会重新加载我正在尝试访问的新用户 ID 的数据，但是如果我来自 /forums 或 /search 等不同的页面，它会正常加载

我已经试过了，componentWillReceiveProps但我不确定我是否正确地实施了它，也不知道现在使用 b/c 是否安全它现在可能会被弃用？？？

我也试过用 withRouter 包装我的 UserProfile 但似乎更糟，因为当我刷新页面时没有数据加载

应用程序.js

<BrowserRouter onUpdate={() => window.scrollTo(0, 0)} >
    <div>
        <Switch>
            <Route exact path="/search" component={Search}/>
            <Route exact path="/forum" component={Forum}/>
            <Route exact path="/user/:id" component={UserProfile} currentUserId={this.state.currentUserId}/>
        </Switch>
    </div>
</BrowserRouter>

我的链接的样子

<Link className="pt-button pt-minimal" to={"/user/"+this.props.currentUserId}>My Profile</Link>

我对 componentWillReceiveProps 的尝试

if (nextProps.match.params.id !== this.props.match.params.id) {
    this.setState({

        userId: nextProps.match.params.id,

    })
    this.componentWillMount();
}

预期：当单击指向另一个用户配置文件的链接时，它会使用该新用户配置文件的数据重定向到新用户配置文件

实际：url 更改但没有数据重新加载。

我正在定义我的路线

<Route path={['/test', '/test\\?foo=:id&bar=:id\\&zoo=:id']} component={Test} />

当我输入 URL 时，localhost:9000/test?foo=100&bar=100&zoo=100它没有被重定向到测试组件。我添加console.log(this.props.location.search)了 componentDidMount() 但它给出的输出为?foo=100&bar=100&zoo=100

它将转到我的错误页面视图，即，

<Route path="" component={ErrorPage} />

我试图从 URL 中删除问号 (?) 并添加了 [、]、$ 等字符，并且 URL 正在点击测试组件。

有什么办法如果我输入 URL =localhost:9000/test?foo=100&bar=100&zoo=100我被重定向到测试组件而不是去错误组件。

我将不胜感激。

我使用了 react-router-dom 中的 HashRouter。当我使用路由器时找不到页面。从 URL 中删除 HashRouter 的最佳方法是什么？我的服务器端项目是 asp.net MVC 和使用 webapi2。IIS6

我尝试使用this.refs.myField.getValue()或this.refs.myTextField.input.value。但是，它们已经贬值了。

我不想使用onChangeinside TextField，我只是在单击按钮 Convert 时转换文本

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: '',
    };
  };

  handleConvertString = (event) => {
    let str = this.refs.myField.getValue();
    this.setState({
      text: str.replace(/[dog]/gi, ''),
    })
  };
  render() {
    return (
      <div>
        <TextField
          ref="myField"
          fullWidth
        />
        <Button variant="outlined" href="#outlined-buttons" onClick={this.handleConvertString}>
          Convert
        </Button>
        <h1>{this.state.text}</h1>
      </div>
    )
    }
}

export default Test;

我需要添加到我的标志图片的链接。我的意思是当我点击我的标志图片时，它应该重定向到仪表板页面。我尝试使用锚标记来做到这一点，但它无法正常工作

 <Header className='header' style={{ position: 'fixed', width: '100%' }}>
      <div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 0 }}>
        {collapsed &&
        <a href="/dashboard">
          <img src={minLogo} alt='Logo' />
        </a>
        }
        { !collapsed &&
          <span>&nbsp;</span>
        }
      </div>
      <Icon
        className="trigger"
        type={collapsed ? 'menu-unfold' : 'menu-fold'}
        onClick={this.toggleSideBar}
      />
      <div style={{ display: 'inline-block', float: 'right' }}>
        <Dropdown overlay={menu} placement="bottomRight">
          <Avatar icon='user' />
        </Dropdown>
      </div>
    </Header>

我有一个带有数据表的路由页面，在组件安装时获取数据。当我多次单击同一个 react-router-dom 链接（到上面的路由）时，似乎只有在路由更改时才卸载组件（要渲染不同的组件）。

我希望再次单击同一链接时强制重新安装组件以获取新数据。react-router-dom Link 或任何其他 Link 组件中是否有任何选项或任何技巧可以做到这一点？

我的示例代码在这里：https : //codesandbox.io/s/react-router-9wrkz

我希望多次单击“关于”链接时“关于”组件将重新安装

因此，我正在尝试使用 react 设置 Office-js excel 加载项（使用此处找到的 yeoman office-js 生成器https://github.com/OfficeDev/generator-office）并且遇到配置添加的问题-in 使用多个路由。看起来不像传统的 React 路由开箱即用（目前正在尝试使用 react-router-dom）。有人知道我会怎么做吗？特别是，看看我应该如何配置某种路由、webpack.config.js 和 manifest.xml。

例如，希望加载类似于 route=[baseUrl]/ 上的 LandingComponent 和 [baseUrl]/signup 上的 SignupComponent 之类的东西。

对于常规的旧 React，我想做的事情看起来像这样

const Routes = () => (
  <div>
    <Route path="/" exact component={LandingComponent} />
    <Route path="/signup" exact component={SignupComponent} />
  </div>
)

我怀疑需要修改的关键代码片段可能涉及 webpack.config.js 中的某些内容（对于实际配置 webpack 来说是新的痛苦，不确定我是否需要与这个人打交道），

清单文件

const Routes = () => (
  <div>
    <Route path="/" exact component={LandingComponent} />
    <Route path="/signup" exact component={SignupComponent} />
  </div>
)

此外，我正在考虑做一些事情，比如从上面的 URL 中删除“.html”（目标是插件应该默认在“ https://localhost:3000/ ”加载登陆，你可以通过按钮导航到“ https://localhost:3000/signup ”，而插件当前默认加载“ https://localhost:3000/taskpane.html …

我在使用 React Router v5 检测路由变化时遇到问题。 愿望是，当路线改变时，我想输出一个 console.log。 愿望是，当路由更改时，我希望在 App 组件的 console.log 中输出该路由（如下面的代码所示），以便我可以根据路由在 App.js 中设置一个变量。

包版本：

"dependencies": {
   "react": "^16.12.0",
   "react-router-dom": "^5.1.2",
}

这是我的路由器当前所在的 App.js 代码：

import React from "react";
import { BrowserRouter as Router, Route, Switch, NavLink } from "react-router-dom"
import "./App.css";
import AdminDashboard from "./pages/AdminDashboard"
import UserList from "./pages/UserList"

function App() {

    const routeChange = () => {
        console.log("foo!")
        console.log(window.location.pathname)
    }

    return (
        <>
            <Router onChange={routeChange}>
                <NavLink exact={true} className="nav-link" to="/AdminDashboard">Admin Dashboard</NavLink>
                <NavLink exact={true} className="nav-link" to="/UserList">User List</NavLink>
                <Switch>
                    <Route path="/AdminDashboard" …

很直接。我已经看到Link在其他Microsoft Fluent UI控件上使用React Router 的示例。不过，我还没有找到将它与 Fluent UILink组件一起使用的方法。

我有一个包含多个选项卡（子项）的页面。我还更改了每个选项卡的 URL，但我仍在父页面上，只是更改选项卡的 URL。

问题是当我单击选项卡时，我无法保持父页面 NavLink 处于活动状态，因为它更改了 URL，但我想在选项卡 URL 上保持活动状态。

这该怎么做？

从“反应”导入反应；从'react-router-dom'导入{导航链接}；

export default () => {


    return (
        <>
        <nav className='Navigation'>
            <ul className={`Navigation__list ${hide}`}>
                <li className='Navigation__list-item'> 
                   <NavLink to="/events" >Events</NavLink> 
                </li>                
            </ul>
        </nav>


        <Tabs />
       </>

    );
}

// 标签组件作为子组件

    export default function Tabs () => (
                <ul className="events__tab">
                    <li> <NavLink to="/events"> All Events </NavLink> </li>
                    <li> <NavLink to="/myevents"> My Events </NavLink> </li>   
                </ul>
)

提前感谢您的支持！