标签: react-router

我使用创建一个bootstrap风格的侧边栏Link.这是我的代码片段:

<ul className="sidebar-menu">
  <li className="header">MAIN NAVIGATION</li>
  <li><Link to="dashboard"><i className="fa fa-dashboard"></i> <span>Dashboard</span></Link></li>
  <li><Link to="email_lists"><i className="fa fa-envelope-o"></i> <span>Email Lists</span></Link></li>
  <li><Link to="billing"><i className="fa fa-credit-card"></i> <span>Buy Verifications</span></Link></li>
</ul>

```

我想active在包装元素上设置活动路径的类<li>.我看到有其他的解决方案,在那里,展示了如何做到这一点kindof(使用反应路由器当前的路线有条件地设置活动类菜单上),但我不认为这是设置在一个包装的主动类的最佳方式Link.

我还发现了https://github.com/insin/react-router-active-component,但感觉它应该是不必要的.

在React Router中,这是可能的,还是需要使用外部解决方案？

在react-router v5中我创建了这样的历史对象：

import { createBrowserHistory } from "history";
export const history = createBrowserHistory();

然后将其传递给路由器：

import { Router, Switch, Route, Link } from "react-router-dom";
<Router history={history}>
 ... my routes
</Router>

我这样做是为了有机会在组件之外使用历史记录：

   // store action
    logout() {
        this.user = null;
        history.push('/');
    }

通过这种方式，我将逻辑移至商店，并且组件尽可能保持干净。但现在，在 React Router v6 中我不能做同样的事情。我仍然可以useNavigate()在我的组件内部使用它进行导航，但我无法创建一个navigate将其使用到我的商店中的组件。还有其他选择吗？

我在我的最新应用程序中使用react-router和redux,并且我面临一些与基于当前url参数和查询所需的状态更改有关的问题.

基本上我有一个组件,每次url更改时都需要更新它的状态.正在通过redux通过道具传递状态,装饰器就像这样

 @connect(state => ({
   campaigngroups: state.jobresults.campaigngroups,
   error: state.jobresults.error,
   loading: state.jobresults.loading
 }))

目前我正在使用componentWillReceiveProps生命周期方法来响应来自react-router的url更改,因为当url在this.props.params和this.props.query中更改时,react-router会将新的props传递给处理程序 - 这种方法的主要问题是我在这个方法中触发一个动作来更新状态 - 然后传递新的道具组件,这将再次触发相同的生命周期方法 - 所以基本上创建一个无限循环,目前我正在设置状态变量来阻止这种情况发生.

  componentWillReceiveProps(nextProps) {
    if (this.state.shouldupdate) {
      let { slug } = nextProps.params;
      let { citizenships, discipline, workright, location } = nextProps.query;
      const params = { slug, discipline, workright, location };
      let filters = this._getFilters(params);
      // set the state accroding to the filters in the url
      this._setState(params);
      // trigger the action to refill the stores
      this.actions.loadCampaignGroups(filters);
    }
  }

是否存在基于路由转换触发操作的标准方法或者我可以将存储的状态直接连接到组件的状态而不是通过props传递它吗？我曾尝试使用willTransitionTo静态方法,但我无法访问this.props.dispatch.

这是导致我麻烦的文件:

var Routers = React.createClass({

  getInitialState: function(){
    return{
      userName: "",
      relatives: []
    }
  },

  userLoggedIn: function(userName, relatives){
    this.setState({
      userName: userName,
      relatives: relatives,
    })
  },

  render: function() {
    return (
      <Router history={browserHistory}>
        <Route path="/" userLoggedIn={this.userLoggedIn} component={LogIn}/>
        <Route path="feed" relatives={this.state.relatives} userName={this.state.userName} component={Feed}/>
      </Router>
    );
  }
});

我试图将新的this.state.relatives和this.state.userName通过路线传递到我的"feed"组件.但我收到此错误消息:

警告:[react-router]你无法改变; 它会被忽略

我知道为什么会发生这种情况,但不知道我应该如何将状态传递给我的"feed"组件.在过去的5个小时里我一直在努力解决这个问题,而且我已经非常绝望了!

请帮忙!谢谢

解:

下面的答案很有帮助,我感谢他们,但他们并不是最简单的方法.在我的情况下做到这一点的最好方法是:当您更改路线时,您只需将消息附加到它,如下所示:

browserHistory.push({pathname: '/pathname', state: {message: "hello, im a passed message!"}});

或者如果你通过链接这样做:

<Link 
    to={{ 
    pathname: '/pathname', 
    state: { message: 'hello, im a passed message!' } 
  }}/>

来源: …

我开始使用react-router v4.<Router>我的app.js中有一个简单的导航链接(参见下面的代码).如果我导航到localhost/vocabulary,路由器会将我重定向到正确的页面.但是,当我按下重新加载(F5)之后(localhost/vocabulary)时,所有内容都会消失并且浏览器报告Cannot GET /vocabulary.怎么可能？有人能给我任何线索如何解决(正确重新加载页面)？

App.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'

const appContainer = document.getElementById('app')

ReactDOM.render(
  <Router>
    <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/vocabulary">Vocabulary</Link></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/vocabulary" component={Vocabulary} />
        </Switch>
    </div>
  </Router>,
appContainer)

我正在使用reactjs路由器的链接组件,我无法使onClickevent正常工作.这是代码:

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

这是通过这种方式或其他方式实现的吗？

我正在使用最新版本react-router(版本^ 3.0.0).

我使用ES5编写了以下路由:

routes.js:

var React = require("react");
var Router = require("react-router");
var AuthorPage = require('./components/authors/authorPage')
var App = require('./components/app')
var Route = Router.Route;

var routes = (
    <Route path="/" component={App}>
        <Route path="authors" component={AuthorPage}/>
     </Route>
);

module.exports = routes;

在另一个名为main.jsI的JS文件中,执行以下调用:

main.js:

var React= require("react");
var ReactDom = require("react-dom");
var Router = require('react-router').Router;
var routes = require('./routes');
ReactDom.render(<Router routes={routes}></Router>, document.getElementById('app'));

当我运行代码时,我在Google Chrome开发人员工具中遇到以下异常:

未捕获的TypeError:无法读取未定义的属性'getCurrentLocation'

这是为什么？我错过了什么？

看看这个React Router Dom v4示例https://reacttraining.com/react-router/web/example/auth-workflow我看到PrivateRoute组件破坏了这样的休息道具

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

我想确定这{ component: Component, ...rest }意味着:

从props,获取Component prop,然后获取给你的所有其他道具,并重命名props为,rest这样你就可以避免使用传递给Route render函数的props的命名问题

我对吗？

假设我的应用程序的基本URL是example.com/app

是否可以在react-router中设置基本路由,而不是将所有路由都写为

/app/a
/app/b
/app/c

我可以将它们指定为

a
b
c

我尝试了以下我在文档中找到的示例,但它不起作用(页面不会显示任何内容).也许是因为我正在使用react-router@3.0.0-alpha.1,或者我做错了什么.

import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: '/app'
})

const Root = ({store}) => (
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={App}>
                ...
            </Route>
        </Router>
    </Provider>
)

在 npm i --save react-router-dom 和 npm install --save with-router 之后我尝试编写

import {withRouter} from 'react-router';

但我收到此错误尝试导入错误：“withRouter”未从“react-router”导出。

import React from 'react';
import PropTypes from 'prop-types';
import { Formik } from 'formik';
import {
  Box,
  Button,
  Card,
  CardContent,
  CardHeader,
  Divider,
 } from '@material-ui/core';
import { connect } from 'react-redux';
import jsonGR from "src/assets/data/greek.json";
import jsonEN from "src/assets/data/english.json";
import { LAN_EN }  from 'src/actions/types';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import AddIcon from '@material-ui/icons/Add';
import axios from 'axios';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from …