Question

我有路由器链接，我需要一个接一个地依次访问（1-> 2-> 3-> 4-> 5-> 6）并且无法从6-> 1 3-> 2

返回

在我的app.js文件中，代码如下：-

class App extends Component {       
  render() {        
    return (           
      <HashRouter>        
       <nav className="nav">         
        <div>      
        <div className="content">
        <div class="donorTitle"><b>Donor Registration</b></div>  <br/>    
          <ul className="header">  
            <font size="18px" color="white"><li> <NavLink to="/"><img src={eligibilitypng}/></NavLink></li></font>
            <li> <NavLink to="/ValidateMobileNumber"><img src={validatemoilenumberpng}/> </NavLink></li> 
            <li> <NavLink to="/PrimaryInformation"><img src={primaryinformationpng}/> </NavLink></li>
            <li> <NavLink to="/DeclarationOfUnderstanding"><img src={declarationofunderstandingpng}/> </NavLink></li> 
            <li> <NavLink to="/ConsentForm"><img src={consentformpng}/> </NavLink></li> 
            <li> <NavLink to="/UniqueId"><img src={uniqueidpng}/> </NavLink></li>
          </ul>   
           <br/><br/><br/><br/>       
          <Route exact path="/" component={EligibilityCheck}/> 
            <Route path="/ValidateMobileNumber" component={ValidateMobileNumber}/>
            <Route path="/PrimaryInformation" component={PrimaryInformation}/>
            <Route exact path="/DeclarationOfUnderstanding" component={DeclarationOfUnderstanding}/>
            <Route path="/ConsentForm" component={ConsentForm}/>
            <Route path="/UniqueId" component={UniqueId}/>
          </div>     
        </div>      
        </nav>    
        </HashRouter>          
    );     
  }      
}          

export default App;

我对此进行了各种尝试都是徒劳的-欢迎发表评论和提供帮助。

Answer 1

首先，您需要通过NavLinks传递状态：

 <NavLink to={location => ({ pathname: "/", state: { prevPath: location.pathname } 
        })}>eligibilitypng</NavLink>

现在，对于每次路线更改，我都会将状态对象传递到该位置。

接下来，您需要一个特殊的Route组件：

function RestrictedRoute({ component: Component, restrictedPath, ...rest }) {
    return (
        <Route
            {...rest}
            render={({ location }) => {
                // if url typed directly throw him back to the beginning
                return !location.state ? (
                    <Redirect
                        to={{
                            pathname: "/"
                        }}
                    />
                   // if coming from the restricted path throw him back
                ) : location.state.prevPath === restrictedPath ? (
                  <Redirect
                    to={{
                      pathname: location.state.prevPath
                    }}
                  />
                // all is good
                ) : (
                    <Component />
                );
            }}
        />
    );
}

用法是：

                              <Route
                              exact
                              path="/"
                              component={() => 
                               <div>EligibilityCheck</div>}
                               />
                              <RestrictedRoute
                                path="/ValidateMobileNumber"
                                restrictedPath="/PrimaryInformation"
                                component={() => 
                                    <div>ValidateMobileNumber</div>}
                               />
                              <Route
                                path="/PrimaryInformation"
                                component={() => <div>PrimaryInformation</div>}
                              /> 
                              //...more routes

完整代码示例：

import ReactDOM from 'react-dom';
import React, { Component } from "react";
import {
    HashRouter,
    NavLink,
    Route,
    Redirect,
} from "react-router-dom";

function RestrictedRoute({ component: Component, restrictedPath, ...rest }) {
    return (
        <Route
            {...rest}
            render={({ location }) => {
                // if the user try to type /step2 in the browser url input directly throw him to step1 or where ever you want
                return !location.state ? (
                    <Redirect
                        to={{
                            pathname: "/"
                        }}
                    />
                    // if the user comes from step 3 throw him back to step 3
                ) : location.state.prevPath === restrictedPath ? (
                  <Redirect
                    to={{
                      pathname: location.state.prevPath
                    }}
                  />
                  // access is grunted to the route
                ) : (
                    <Component />
                );
            }}
        />
    );
}



class App extends Component {
    render() {
        return (
            <HashRouter>
                <nav className="nav">
                    <div>
                        <div className="content">
                            <div className="donorTitle">
                                <b>Donor Registration</b>
                            </div>{" "}
                            <br />
                            <ul className="header">
                                    <li>
                                        {" "}
                                        <NavLink to={location => ({ pathname: "/", state: { prevPath: location.pathname } })}>step 1</NavLink>
                                    </li>
                                <li>
                                    {" "}
                                    <NavLink
                                        to={location => ({ pathname: "/step2", state: { prevPath: location.pathname } })}
                                    >
                                        step 2{" "}
                                    </NavLink>
                                </li>
                                <li>
                                    {" "}
                                    <NavLink to={location => ({ pathname: "/step3", state: { prevPath: location.pathname } })}>
                                        step 3{" "}
                                    </NavLink>
                                </li>
                            </ul>
                            <br />
                            <br />
                            <br />
                            <br />
                            <Route
                                exact
                                path="/"
                                component={() => <div><h1>step1</h1></div>}
                            />
                            <RestrictedRoute
                                path="/step2"
                                restrictedPath="/step3"
                                component={() => <div><h1>step2</h1><p>can't go to here from step 3...</p></div>}
                            />
                            <Route
                                path="/step3"
                                component={() => <div><h1>step 3</h1></div>}
                            />
                        </div>
                    </div>
                </nav>
            </HashRouter>
        );
    }
}



ReactDOM.render(<App />, document.getElementById('root'));

注意：您可以将RestrictedRoute重用于您想要的任何路由。

实时代码 example

如何在reactjs中访问路由器链接？

1 个答案: