react-molin
react-molin copied to clipboard
this.props.match.path 找不到
when i use code split with bundle-loader like this:
webpack.js
entry: {
'stargate-portal': './src/entry.jsx'
},
output: {
// path: path.resolve(__dirname, 'dist'),
path: path.resolve(__dirname, outputPath),
filename: 'res/js/[name].[hash:8].js',
chunkFilename: 'res/js/[name].[chunkhash:8].bundle.js',
publicPath: "./"
},
entry.jsx
const {
HashRouter,
Route,
Link,
Switch,
Redirect
} = ReactRouterDOM
import Home from '@/components/home';
// import Console from '@/components/console';
import Console from 'bundle-loader?lazy&name=storgate-portal-console!@/components/console';
// import ListContainer from 'bundle-loader?lazy&name=app-[name]!./app/list.js';
import './main.less';
import Bundle from './bundle';
const ConsoleLazy = () => (
<Bundle load={Console}>
{(Console) => <Console />}
</Bundle>
)
const Portal = () => (
<HashRouter>
<div className="stargate-portal">
<Switch>
<Route path="/console" component={ConsoleLazy} />
<Route path="/" component={Home} />
</Switch>
</div>
</HashRouter>
)
ReactDOM.render(
<Portal />,
document.getElementById('storgate-portal')
);
console/index.js
render() {
const consolePath = this.props.match.path;
return (
<Content style={{ background: '#fff', padding: 24, margin: '12px', height: 'auto' }}>
<Switch>
<Redirect exact from={`${consolePath}`} to={`${consolePath}/project_detail`} />
<Route path={`${consolePath}/project_detail`} component={ProjectDetail} />
<Route exact path={`${consolePath}/app`} component={AppList} />
<Route path={`${consolePath}/app/:id`} component={AppDetail} />
<Route exact path={`${consolePath}/contacts`} component={ContactsList} />
<Route path={`${consolePath}/contacts/:id`} component={ContactsDetail} />
<Route path={`${consolePath}/logs`} component={LogList} />
</Switch>
</Content>
);
}
the webpack output result is:
But when i get /console. browser take error:
TypeError: Cannot read property 'path' of undefined
what should i do?