标签: react-router

任何人都可以告诉我如何回到上一页而不是特定的路线？

使用此代码时:

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

得到此错误,goBack()被忽略,因为没有路由器历史记录

这是我的路线:

// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;

var routes = (
 <Route name="app" path="/" handler={OurSchoolsApp}>
     <DefaultRoute name="home" handler={HomePage} />
     <Route name="add-school" handler={AddSchoolPage}  />
     <Route name="calendar" handler={CalendarPage}  />
     <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
     <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
     <Route name="info" handler={InfoPage} />
     <Route name="news" handler={NewsListPage} />
     <Route …

我正在使用最新版本的react-router模块,名为react-router-dom,在使用React开发Web应用程序时已成为默认设置.我想知道如何在POST请求后进行重定向.我一直在制作这段代码,但在请求之后,没有任何反应.我在网上查看,但所有数据都是关于反应路由器的先前版本,而不是最后一次更新.

码:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'

import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';

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

    this.state = {
      errors: {},
      client: {
        userclient: '',
        clientname: '',
        clientbusinessname: '',
        password: '',
        confirmPassword: ''
      }
    };

    this.processForm = this.processForm.bind(this);
    this.changeClient = this.changeClient.bind(this);
  }

  changeClient(event) {
    const field = …

我有一个导航栏，当路线单击时发生变化时，它会在每条路线中呈现。

./components/navbar.jsx

import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';



class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <div id = 'navbar'>

                <div className='name-head'>
                    My Name
                </div>
            
            
                <div id = 'nav-links-container'>
                    
                    <Link to='/experiences'>
                        <div className = 'nav-links'>
                            Experiences
                        </div>
                    </Link>

                    <div className = 'nav-links'>
                        Projects
                    </div>

                    <div className = 'nav-links'>
                        Skills
                    </div>

                    <div className = 'nav-links'>
                        Resume
                    </div>

                </div>
                
            </div>
        );
    }
}

export default …

有人可以解释之间的区别

 <Route exact path="/" component={Home} />

和

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

我不知道'确切'的含义

我有一些小问题从React-Router v3迁移到v4.在v3中我能够在任何地方执行此操作:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

我如何在第4版中实现这一目标.

我知道withRouter当你在Component中时,我可以使用,特别的,反应上下文或事件路由器道具.但事实并非如此.

我正在寻找v4 中NavigatingOutsideOfComponents的等价性

React-router-dom 的版本是 v6，我在使用 Navigate 将值传递到另一个组件时遇到问题。

我想将选定的行传递到另一个名为“报告”的页面。但是，我不确定我是否使用了正确的navigate方法语法，并且我不知道如何在报告组件中获取该状态。

redirectToReport(rowData)Material-ui 表：我正在尝试在参数中使用onClick。

function TableRows(props){
return (
    <MaterialTable
        title="Leads"
        columns={[
            ...
        ]}
        data = {props.leads}       
        options={{
            selection: true,
            filtering: true,
            sorting: true
        }}
        actions = {[{
            position: "toolbarOnSelect",
            tooltip: 'Generate a report based on selected leads.',
            icon: 'addchart',
            onClick: (event, rowData) => {
                console.log("Row Data: " , rowData)
                props.redirect(rowData)
            }
        }]}
    />
)}

LeadTable 组件

export default function LeadTable(props) {
let navigate = useNavigate();

const [leads, setLeads] = useState([]);
const …

我似乎无法找到如何使用react-router更新查询参数而不使用<Link/>.hashHistory.push(url)似乎没有注册查询参数,似乎你不能将查询对象或任何东西作为第二个参数传递.

如何从更改URL /shop/Clothes/dresses,以/shop/Clothes/dresses?color=blue在反应路由器没有使用<Link>？

并且onChange函数真的是监听查询更改的唯一方法吗？为什么不自动检测到查询更改并对响应更改的方式做出反应？

我有以下内容:

如何摆脱蓝色下划线？代码如下:

<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>

MenuItem组件来自http://www.material-ui.com/#/components/menu

任何见解或指导将不胜感激.先感谢您.

我有一个如下的路由器:

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Index}/>
        <Route path="login" component={Login}/>
    </Route>
</Router>

这就是我想要实现的目标:

1. /login如果未登录,则将用户重定向到
2. 如果用户/login在登录时尝试访问,请将其重定向到root/

所以现在我想以检查用户的状态App的componentDidMount,然后做一些事情,如:

if (!user.isLoggedIn) {
    this.context.router.push('login')
} else if(currentRoute == 'login') {
    this.context.router.push('/')
}

这里的问题是我找不到API来获取当前路由.

我发现使用Router.ActiveState mixin和路由处理程序建议这个封闭的问题,但看起来这两个解决方案现在已被弃用.

我在三个不同的路线上使用相同的组件:

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

无论如何要结合它,就像:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>