Tôi hiện đang vật lộn với các tuyến lồng nhau bằng bộ định tuyến v4.
Ví dụ gần nhất là cấu hình tuyến đường trong Tài liệu React-Router v4 .
Tôi muốn chia ứng dụng của tôi thành 2 phần khác nhau.
Một lối vào và một khu vực quản trị.
Tôi đã suy nghĩ về một cái gì đó như thế này:
<Match pattern="/" component={Frontpage}>
<Match pattern="/home" component={HomePage} />
<Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
<Match pattern="/home" component={Dashboard} />
<Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />Frontend có bố cục và phong cách khác với khu vực quản trị. Vì vậy, trong các frontpage tuyến đường về nhà, về và vì vậy một nên là các tuyến con.
/ home nên được kết xuất thành thành phần Frontpage và / admin / home sẽ được hiển thị trong thành phần Backend.
Tôi đã thử một số biến thể nhưng tôi luôn kết thúc bằng việc không nhấn / home hoặc / admin / home.
Chỉnh sửa - 19.04.2017
Bởi vì bài đăng này có rất nhiều lượt xem ngay bây giờ nên tôi đã cập nhật nó với giải pháp cuối cùng. Tôi hi vọng nó giúp ích cho ai đó.
Chỉnh sửa - 08.05.2017
Loại bỏ các giải pháp cũ
Giải pháp cuối cùng:
Đây là giải pháp cuối cùng tôi đang sử dụng ngay bây giờ. Ví dụ này cũng có thành phần lỗi toàn cầu như trang 404 truyền thống.
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
const Home = () => <div><h1>Home</h1></div>;
const User = () => <div><h1>User</h1></div>;
const Error = () => <div><h1>Error</h1></div>
const Frontend = props => {
console.log('Frontend');
return (
<div>
<h2>Frontend</h2>
<p><Link to="/">Root</Link></p>
<p><Link to="/user">User</Link></p>
<p><Link to="/admin">Backend</Link></p>
<p><Link to="/the-route-is-swiggity-swoute">Swiggity swooty</Link></p>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/user' component={User}/>
<Redirect to={{
state: { error: true }
}} />
</Switch>
<footer>Bottom</footer>
</div>
);
}
const Backend = props => {
console.log('Backend');
return (
<div>
<h2>Backend</h2>
<p><Link to="/admin">Root</Link></p>
<p><Link to="/admin/user">User</Link></p>
<p><Link to="/">Frontend</Link></p>
<p><Link to="/admin/the-route-is-swiggity-swoute">Swiggity swooty</Link></p>
<Switch>
<Route exact path='/admin' component={Home}/>
<Route path='/admin/user' component={User}/>
<Redirect to={{
state: { error: true }
}} />
</Switch>
<footer>Bottom</footer>
</div>
);
}
class GlobalErrorSwitch extends Component {
previousLocation = this.props.location
componentWillUpdate(nextProps) {
const { location } = this.props;
if (nextProps.history.action !== 'POP'
&& (!location.state || !location.state.error)) {
this.previousLocation = this.props.location
};
}
render() {
const { location } = this.props;
const isError = !!(
location.state &&
location.state.error &&
this.previousLocation !== location // not initial render
)
return (
<div>
{
isError
? <Route component={Error} />
: <Switch location={isError ? this.previousLocation : location}>
<Route path="/admin" component={Backend} />
<Route path="/" component={Frontend} />
</Switch>}
</div>
)
}
}
class App extends Component {
render() {
return <Route component={GlobalErrorSwitch} />
}
}
export default App;previousLocationlogic.