[英]React not rendering Route Components
我正在使用管理儀表板構建面向消費者的應用程序。 我想保持路由分開為他們,所以試圖委派: -
App.js
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//styles
import './style/bootstrap/bootstrap.scss';
//apps
import Mainapp from './mainapp/Mainapp';
import Admin from './admin/Admin';
const MainappContainer = () => (
<Mainapp />
);
const AdminContainer = () => (
<Admin />
);
class App extends Component{
render(){
return (
<Router>
<Switch>
<Route path="/admin" component={AdminContainer}/>
<Route path="/" component={MainappContainer}/>
</Switch>
</Router>
)
}
}
export default App;
Admin.js
import React, {Component} from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
//styles
import './admin-style.scss';
//layout
import ControlPanel from './component/layout/ControlPanel';
import Navbar from './component/layout/Navbar';
//pages
import Quote from './component/pages/quote/Quote';
class Admin extends Component{
render(){
return (
<div className="adminWrapper">
<ControlPanel />
<section className="viewPanel">
<Navbar />
<Router>
<Route path="/quote" component={Quote}/>
</Router>
</section>
</div>
)
}
}
export default Admin;
但是,當我點擊URL
http://localhost:3000/admin/quote
它似乎沒有加載引用組件
Quote.js
import React, { Component } from 'react';
class Quote extends Component {
render() {
return (
<div className="float-right pr-3">
<h3>
Quote Page
</h3>
</div>
)
}
}
export default Quote;
處理嵌套的子路由時,最簡單的解決方案是使用匹配 。
path - (字符串)用於匹配的路徑模式。 用於構建嵌套路由。
url - (字符串)URL的匹配部分。 用於構建嵌套鏈接。
按照設計,放置在Route的component
渲染方法中的component
會給來自react-router-dom的幾個額外的道具。 其中有歷史和match
。 您可以利用這些道具來匹配子路由和/或控制瀏覽器歷史記錄位置。
此外,您只需要一個 BrowserRouter
實例位於應用程序的頂層,然后您可以使用Switch
可選地呈現任何主路徑或子路徑。 除非您正在使用state
和/或類字段,否則您不需要使用類組件。
您的應用程序的一個非常基本的基本工作示例 :
SRC /組件/管理員/ index.js
import React from "react";
import { Switch, Link, Route } from "react-router-dom";
import ControlPanel from "../ControlPanel";
import Quote from "../Quote";
// since Admin is placed inside a Route's component render
// method, it has access to history and match
function Admin({ history, match }) {
return (
<div className="adminWrapper">
<ControlPanel />
<section className="viewPanel">
<Link to={`${match.url}/quote`}>View quote</Link>
<br />
<Switch>
<Route exact path={`${match.path}/quote`} component={Quote} />
</Switch>
</section>
<br />
<button type="button" onClick={() => history.goBack()}>
Go Back
</button>
</div>
);
}
export default Admin;
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import Admin from "./components/Admin";
const linkStyle = {
padding: "0 10px"
};
function App() {
return (
<BrowserRouter>
<Link style={linkStyle} to="/">
Home
</Link>
<Link style={linkStyle} to="/admin">
Admin
</Link>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/" render={() => <h1>Main App</h1>} />
</Switch>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<Route exact path="/admin" component={AdminContainer}/>
<Route exact path="/admin/quote" component={Quote}/>
這不會將您路由到/ admin / quote,而是會將您路由到/ admin / admin / quote。
因為它是內部管理員只是/ quote就夠了
<Route path="/admin" component={AdminContainer}/>
<Route path="/quote" component={Quote}/>
按照嵌套路由示例
您需要做的主要更改是:
1.從Admin
組件中刪除<Router></Router>
2.將match.path
到"/quotes"
,就像在示例中的Topics
組件中一樣。 在示例中, Topics
是一個函數組件,因此它將接收match
作為函數參數。 由於您的Admin
組件是類組件,因此您可以在render
方法中以this.props.match
訪問它。
<Route path={`${this.props.match.path}/quote`} component={Quote}/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.