找不到網頁陣營路由器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

回答

相關問題