Javascript 在react router v4中查看嵌套路由中的空白页
我是一个新的反应,仍然在学习。 我试图在react项目中添加嵌套路由,以便div的内容根据路由进行更改 以下是我的组件:-Javascript 在react router v4中查看嵌套路由中的空白页,javascript,reactjs,react-router-v4,react-router-dom,Javascript,Reactjs,React Router V4,React Router Dom,我是一个新的反应,仍然在学习。 我试图在react项目中添加嵌套路由,以便div的内容根据路由进行更改 以下是我的组件:- //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 './
//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
//index.js
导入'bootstrap/dist/css/bootstrap.min.css';
导入'font-awesome/css/font-awesome.min.css';
导入“./index.css”;
从“./App”导入应用程序;
将*作为serviceWorker从“/serviceWorker”导入;
图书馆。添加(faIgloo);
ReactDOM.render(
但没有一个成功
我希望我已经清楚地解释了我的问题。检查文档。从应用程序组件中的路由中删除exact
,它将开始工作。检查文档。从应用程序组件中的路由中删除exact
,它将开始工作。以及“/protected/cafepreview”路由在哪里?安全路由在哪里“/protected/cafepreview”路径?