Question

我很困惑。我有一个虚拟组件，有条件地呈现三种形式（我正在使用formik）。像这样：

const SignUp = ({values, touch, errors}) => {
    ... set conditions to render the 3 Forms...
    return(
      <div>
        <Form1 {complete ? onClick={go to form 2}} /> or
        <Form2 {complete ? onClick={go to form 3}}> /> or
        <Form3>
      <div>
    )
}

现在，这些表单需要登录到浏览器历史记录中，以便用户可以选择返回其中一种表单。这是routes/index.js

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

import Main from '../pages/main/main';
import How from '../pages/how/how';
import SignUp from '../pages/signup/signup';

const Routes = () => (
    <BrowserRouter>
        <div className="wrapper">
            <Switch>
                <Route exact path="/" render={() => <Redirect to="/index/acceuil"/>}/>
                <Route path="/index/acceuil" render={props => <Main {...props} />}/>
                <Route path="/index/how" render={props => <How {...props} />}/>
                <Route path="/user/signup/" render={props => <SignUp {...props}/>} />
                <Route component={Error}/>
            </Switch>
        </div>
    </BrowserRouter>
);

//exporting to App.js
export default Routes;

和进入主页注册页面的按钮：

<NavLink to="/user/signup" className='signup orange-btn'>SIGN UP</NavLink>

理想情况下，我需要添加一个查询参数，以便浏览器历史记录得以保留，并且如果用户返回页面，他将不会简单地完全退出注册。但是我不知道如何使用React-Router来做到这一点（除了整个location.pathname之外），我什至应该使用React Router来做到这一点吗？还是有更好的方法？

向URL添加查询以响应路由器

0 个答案: