[英]Seeing blank page in nested routes in react-router v4
I am new to react and still learning.我是新手,仍在学习。 I am trying to add nested routes in my react project, so that a content of div changes based on the route.
我正在尝试在我的 React 项目中添加嵌套路由,以便 div 的内容根据路由而变化。
Following are my components :-以下是我的组件:-
//index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
library.add(faIgloo);
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();
// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'
import './App.css';
class App extends Component {
render() {
return (
<Switch>
<Route exact path="/protected" component={Protected}/>
<Route path="/login" component={Login}/>
</Switch>
);
}
}
export default App;
//protected.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './header/header.js';
import './protected.css';
import CafePreview from './cafepreview/cafepreview.js'
class Protected extends Component {
render() {
const {match} = this.props;
return (
<div>
<Header></Header>
{/*<Preview/>*/}
<Switch>
<Route path='/protected/cafepreview' component={CafePreview}/>
</Switch>
</div>
);
}
}
export default Protected
// cafepreview.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './preview.css';
console.log("here");
class CafePreview extends Component {
render() {
return (
<div>
<div>
<i class="fa fas fa-arrow-left"></i>
<span> BACK TO ALL CAFES </span>
</div>
</div>
);
}
}
export default CafePreview
When i open '/protected' i can see the header coming, but when i try to open '/protected/cafepreview' i see an empty page instead of header with cafe preview html.当我打开“/protected”时,我可以看到标题即将到来,但是当我尝试打开“/protected/cafepreview”时,我看到一个空页面,而不是带有咖啡馆预览 html 的标题。
I tried some options mentioned in this stackoverflow thread Multiple Nested Routes in react-router-dom v4 but none of them worked.我尝试了在 react-router-dom v4 中的stackoverflow 线程Multiple Nested Routes 中提到的一些选项,但它们都不起作用。
I hope i have explained my problem clearly.我希望我已经清楚地解释了我的问题。
Check documentation https://reacttraining.com/react-router/web/api/Route/exact-bool . 查看文档https://reacttraining.com/react-router/web/api/Route/exact-bool 。 Remove
exact
from the route in the App component and it will start working. 从App组件中的路线中删除
exact
的路线,它将开始起作用。
its because you have set exact
in the app.js
file.这是因为您在
app.js
文件中设置了exact
。 Remove it from the particular route.从特定路由中删除它。 It'll work
它会工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.