使用react-router4.0实现重定向和404功能的方法

指定404页面也非常简单，只需要在路由系统最后使用Route指定404页面的component即可

 

1 2 3 4 5

<Switch>  <Route path="/" exact component={Home}/>  <Route path="/user" component={User}/>  <Route component={NoMatch}/> </Switch>

当路由指定的所有路径没有匹配时，就会加载这个NoMatch组件，也就是404页面

实验代码如图：

        //遍历模块路由
        let mentRoute_h = null;//
        let firstMenuModuleUri = null;//加载菜单第一项
        let moduleTmpNum=0,validModuleNum=0;//
        let havaModuleNum=this.state.menu_data.length;//用户拥有模块数量
        let allModuleNum=Object.keys(MenuRoute).length;//所有模块数量
        validModuleNum=havaModuleNum>allModuleNum?allModuleNum:havaModuleNum;//取小
        mentRoute_h = [1].map((item, index) => {
            let hh = null;
            let herror = <Redirect to="/app/error" />;
            //登录，所拥有的模块
            hh = this.state.menu_data.map((item, index) => {
                let menu_h = null;
                //系统所有模块
                menu_h = Object.keys(MenuRoute).map(key => {
                    if (key == item.uri) {
                        //if(item.)
                        moduleTmpNum++;
                        if (item.tab == 0 || item.tab == 1) {
                            firstMenuModuleUri = item.uri;//默认第一菜单
                        };
                        return (<Route path={key} component={MenuRoute[key]}></Route>)
                    }
                });
                return menu_h;
            });
            let returnModule_h=null;//返回最终路由
            if(moduleTmpNum==validModuleNum){
                //console.log('遍历完成！');
                returnModule_h=<Redirect to="/app/error" />;
            };
            let defaultTmp=<Route path="/app/error" component={ErrorPage}></Route>;
            //return hh
            return (
                <Switch>
                    <Route exact path="/app/" render={() => <Redirect to={firstMenuModuleUri}></Redirect>}></Route>
                    {hh}
                    {defaultTmp}
                    <Route component={ErrorPage}/>
                    {/* {returnModule_h} */}
                    {/* <Redirect to="/app/error" /> */}
                </Switch>
            );
        });

注意：

要想完成404页面跳转，使用重定向<Redirect to="/app/error" />也行，不过不用通过变量的形式注入，需要直接在页面配置，通过变量let redirectRoute=<Redirect to="/app/error" />;无效如下图代码：

方法一：

<Switch>
       <Route exact path="/app/" render={() => 
       <Redirect to={'/app/users'}></Redirect>}></Route>
       <Route path="/app/error" component={ErrorPage}></Route>
       <Route path="/app/estate" component={Estate}></Route>
       <Route path="/app/users" component={Users}></Route>
       <Redirect to="/app/error" />
</Switch>

 

方法二：

如果你想通过数据遍历的形式，使用<Route component={NoMatch}/>

<Switch>
 <Route path="/" exact component={Home}/>
 <Route path="/user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

指定404页面也非常简单，只需要在路由系统最后使用Route指定404页面的component即可，当路由指定的所有路径没有匹配时，就会加载这个NoMatch组件，也就是404页面

js变量注入：

let redirectRoute=<Redirect to="/app/error" />;
render(){
return(

<Switch>

    <Route exact path="/app/" render={() => 
    <Redirect to={'/app/users'}></Redirect>}></Route>

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

    <Route path="/app/estate" component={Estate}></Route>

    <Route path="/app/users" component={Users}></Route>
    {redirectRoute}

</Switch>
)}

亲测ok