[英]React not rendering Route Components
I am building a consumer facing app with a admin dashboard. 我正在使用管理仪表板构建面向消费者的应用程序。 I want to keep the routing separate for them and so trying to delegate :-
我想保持路由分开为他们,所以试图委派: -
App.js 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 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;
However when I hit the URL 但是,当我点击URL
http://localhost:3000/admin/quote
it doesn't seem to load the quote component 它似乎没有加载引用组件
Quote.js 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;
When dealing with nested subroutes, the easiest solution is to use match . 处理嵌套的子路由时,最简单的解决方案是使用匹配 。
path - (string) The path pattern used to match.
path - (字符串)用于匹配的路径模式。 Useful for building nested Routes.
用于构建嵌套路由。
url - (string) The matched portion of the URL.
url - (字符串)URL的匹配部分。 Useful for building nested Links.
用于构建嵌套链接。
By design, components placed inside a Route's component
render method are given several additional props from react-router-dom. 按照设计,放置在Route的
component
渲染方法中的component
会给来自react-router-dom的几个额外的道具。 Among them are history and match
. 其中有历史和
match
。 You can leverage these props to either to match against sub routes and/or to control browser history location. 您可以利用这些道具来匹配子路由和/或控制浏览器历史记录位置。
In addition, you only need one instance of BrowserRouter
sitting at the top-level of the application, then you can use Switch
to optionally render any main or sub routes. 此外,您只需要一个
BrowserRouter
实例位于应用程序的顶层,然后您可以使用Switch
可选地呈现任何主路径或子路径。 And you don't need to use class components unless you're utilizing state
and/or a class field. 除非您正在使用
state
和/或类字段,否则您不需要使用类组件。
A very basic, rudimentary working example of your application : 您的应用程序的一个非常基本的基本工作示例 :
src/components/Admin/index.js 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 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}/>
This won't route you to /admin/quote instead it will route you to /admin/admin/quote. 这不会将您路由到/ admin / quote,而是会将您路由到/ admin / admin / quote。
Since it is inside admin just /quote is enough 因为它是内部管理员只是/ quote就够了
<Route path="/admin" component={AdminContainer}/>
<Route path="/quote" component={Quote}/>
Follow the Nested Routing Example 按照嵌套路由示例
The main changes you need to do are: 您需要做的主要更改是:
1. Remove the <Router></Router>
from Admin
component and 1.从
Admin
组件中删除<Router></Router>
2. Prepend match.path
to "/quotes"
, like it is done in Topics
component in the example. 2.将
match.path
到"/quotes"
,就像在示例中的Topics
组件中一样。 In the example, Topics
is a function component so it is receiving match
as function parameter. 在示例中,
Topics
是一个函数组件,因此它将接收match
作为函数参数。 As your Admin
component is class component, you can access it as this.props.match
in render
method. 由于您的
Admin
组件是类组件,因此您可以在render
方法中以this.props.match
访问它。
<Route path={`${this.props.match.path}/quote`} component={Quote}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.