找不到网页阵营路由器V4

我想对我的路线找不到网页阵营路由器V4

import React from 'react'; 
import { Route, Switch } from 'react-router-dom'; 
import PropTypes from 'prop-types'; 
import Home from './components/home'; 
import MyWork from './components/work/myWork'; 
import WorkShow from './components/work/workShow'; 
import NavigationBar from './components/shared/navbar'; 
import Footer from './components/shared/footer'; 
import CategoryShow from './components/category/categoryShow'; 
import PostIndex from './components/post/postIndex'; 
import PostShow from './components/post/postShow'; 
import PostSearch from './components/post/postSearch'; 
import TagShow from './components/tag/tagShow'; 
import NotFound from './components/shared/notFound'; 

const DefaultLayout = ({ component: Component, ...rest }) => (
    <Route 
    {...rest} render={matchProps => (
     <div> 
     <NavigationBar /> 
     <div className="mainContent"> 
      <Component {...matchProps} /> 
     </div> 
     <Footer /> 
     </div> 
    )} 
    /> 
); 

DefaultLayout.propTypes = ({ 
    component: PropTypes.shape.isRequired, 
}); 

const BlogLayout = ({ component: Component, ...rest }) => (
    <Route 
    {...rest} render={matchProps => (
     <div> 
     <NavigationBar path="blog" /> 
     <div className="mainContent"> 
      <Component {...matchProps} /> 
     </div> 
     <Footer /> 
     </div> 
    )} 
    /> 
); 

BlogLayout.propTypes = ({ 
    component: PropTypes.shape.isRequired, 
}); 

const Work =() => (
    <Switch> 
    <Route exact path="/my-work" component={MyWork} /> 
    <Route path="/my-work/:workName" component={WorkShow} /> 
    </Switch> 
); 

const Blog =() => (
    <Switch> 
    <Route exact path="/blog" component={PostIndex} /> 
    <Route path="/blog/search" component={PostSearch} /> 
    <Route exact path="/blog/:postName" component={PostShow} /> 
    <Route path="/blog/category/:categoryName" component={CategoryShow} /> 
    <Route path="/blog/tag/:tagName" component={TagShow} /> 
    </Switch> 
); 

const routes = (
    <div> 
    <DefaultLayout exact path="/" component={Home} /> 
    <DefaultLayout path="/my-work" component={Work} /> 
    <BlogLayout path="/blog" component={Blog} /> 
    </div> 
); 

export default routes;

我试过没有发现成分：

const routes = (
     <div> 
     <DefaultLayout exact path="/" component={Home} /> 
     <DefaultLayout path="/my-work" component={Work} /> 
     <BlogLayout path="/blog" component={Blog} /> 
     <BlogLayout path="*" component={NotFound} /> 
     </div> 
    );

但NOTFOUND组件总是呈现，我只希望这个渲染当用户输入一个不正确的URL时。我如何在反应路由器v4中执行此操作？

来源

2017-06-03 Hinesh Patel

的可能的复制[为什么我的组件保持渲染的所有路由？]（https://stackoverflow.com/questions/44193807/why-does-my-component-keep-rendering-in-all-路线） – Li357

这不是一个有效的反应路由器块：

const routes = (
    <div> 
    <DefaultLayout exact path="/" component={Home} /> 
    <DefaultLayout path="/my-work" component={Work} /> 
    <BlogLayout path="/blog" component={Blog} /> 
    </div> 
);

您需要实际使用反应的组分的航路和开关（就像你在组件本身一样）。类似于：

<Switch> 
    <Route exact path='/' component={Home}/> 
    <Route path='/my-work' component={Work}/> 
    <Route path='/blog' component={Blog}/> 
</Switch>

来源

2017-06-03 23:17:05

我已经用整个route.jsx文件更新了我的原始问题，它是这样实现的，因为我需要不同的布局，具体取决于路径 –

您只需使用不带路径属性的Switch和Route。

const routes = (
    <Switch> 
     <Route exact path="/" component={Home} /> 
     <Route path="/my-work" component={Work} /> 
     <Route path="/blog" component={Blog} /> 
     <Route component={NotFound} /> 
    <Switch> 
);

来源

2017-06-03 23:23:31 SLee

找不到网页阵营路由器V4

回答

相关问题