React-Router-Dom 配置404页面

最新推荐文章于 2024-08-02 10:43:58 发布

Daidason

最新推荐文章于 2024-08-02 10:43:58 发布

阅读量1k

点赞数

文章标签： javascript html5 react.js

本文链接：https://blog.csdn.net/qq_36205027/article/details/129443120

版权

该文章展示了如何在React应用中创建404页面，通过`react-router-dom`定义路由，使用`react-imported-component`动态导入组件，并设置全局路由以处理未找到的路径。此外，还介绍了子路由的配置和严格匹配的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步写一个404页面

class NotFoundPage extends PureComponent{
  render() {
    return <div className="notFundPageBox">
    <div className="box_404">
      <a href="#/index" className="btnBackH">没有找到相应页面</a>
    </div>
  </div>
  }
}

定义404页面路由

import Imported from 'react-imported-component';
import {Route} from 'react-router-dom';

const notFoundPage = Imported(() => {
  return import(/* webpackChunkName: "notFoundPage" */ 'containers/notFundPage')
});

const NotFundPageRoutes = () => (
    <Route component={notFoundPage}/>
);
export default NotFundPageRoutes;

第二步找到跟路由

import { Route, Switch } from 'react-router-dom';
import HomeRoutes from '../containers/home/router';
import Test1Routes from '../containers/test1/router';
import Test2Routes from '../containers/test2/router';
import NotFundPageRoutes from '../containers/notfundpage/router';

const AllRoutes = () => (
    <div>
        <Switch>
            <Route exact path='/index' component={HomeRoutes}/>
            <Route path='/test1' component={Test1Routes}/>
            <Route path='/test2' component={Test2Routes}/>
            <Route path='*' component={NotFundPageRoutes}/>
        </Switch>
    </div>
);
export default AllRoutes;

exact 指严格匹配路径，如果homepage路由只有一个/index ，可以设置严格匹配

找到子路由

import {Route} from 'react-router-dom'
import Imported from 'react-imported-component';
import {homeReducer} from './reducers'
import CommonUtil from '../../util/CommonUtil';

const IndexPage = Imported(() => {
    CommonUtil.injectReducer({home: homeReducer}); //注册reduce
    return import(/* webpackChunkName: "IndexPage" */ 'containers/home/IndexPage')
});

 const HomePage = () => (
    <Route exact path='/index' component={IndexPage}/>
);

export default HomePage;

后面匹配子路由均和上方一致即可

import Imported from 'react-imported-component';
import {Route,Switch} from 'react-router-dom';
import {homeReducer} from "../home/reducers";
import NotFundPageRoutes from '../containers/notfundpage/router';

const TestComponent = Imported(() => {
  CommonUtil.injectReducer({home: homeReducer}); //注册reduce
  return import(/* webpackChunkName: "TestComponent" */ 'containers/TestComponent')
});

const Test1Routes = () => (
    <div>
      <Switch>
        <Route exact path='/test/list/:type' component={TestComponent}/> //exact严格模式
        <Route path='*' component={NotFundPageRoutes}/>
      </Switch>
    </div>
);
export default Test1Routes;