React-Router-Dom 配置404页面

1. 第一步写一个404页面

class NotFoundPage extends PureComponent{
  render() {
    return 

    

      没有找到相应页面
    
  
  }
}

1. 定义404页面路由

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

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

const NotFundPageRoutes = () => (
    
);
export default NotFundPageRoutes;

2. 第二步找到跟路由

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 = () => (
    

        
            
            
            
            
        
    
);
export default AllRoutes;

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

3. 找到子路由

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 = () => (
    
);

export default HomePage;

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

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 = () => (
    

      
         //exact严格模式
        
      
    
);
export default Test1Routes;

1. 子项路由进行严格匹配

2. 弱匹配404不能出现

打开网址，随便输入路径，未能在Router中匹配到的路由，均显示404 未找到页面