मैं वर्तमान में प्रतिक्रिया रूटर v4 का उपयोग करते हुए नेस्टिंग मार्गों से संघर्ष कर रहा हूं।
निकटतम उदाहरण रिएक्ट-राउटर v4 प्रलेखन में मार्ग विन्यास था ।
मैं अपने ऐप को 2 अलग-अलग हिस्सों में विभाजित करना चाहता हूं।
एक दृश्यपटल और एक व्यवस्थापक क्षेत्र।
मैं कुछ इस तरह के बारे में सोच रहा था:
<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} />फ्रंटएंड में व्यवस्थापक क्षेत्र की तुलना में एक अलग लेआउट और शैली है। तो मुख पृष्ठ के भीतर घर मार्ग, के बारे में और इसलिए एक बच्चे के मार्ग होना चाहिए।
/ होम को फ्रंटपेज घटक में प्रस्तुत किया जाना चाहिए और / व्यवस्थापक / घर को बैकएंड घटक के भीतर प्रदान किया जाना चाहिए।
मैंने कुछ बदलावों की कोशिश की लेकिन मैं हमेशा मार / घर या / व्यवस्थापक / घर में नहीं समाप्त हुआ।
संपादित करें - 19.04.2017
क्योंकि इस पोस्ट में अभी बहुत सारे विचार हैं, मैंने इसे अंतिम समाधान के साथ अद्यतन किया। मुझे उम्मीद है कि यह किसी की मदद करता है।
संपादित करें - 08.05.2017
पुराने हल निकाले
अंतिम समाधान:
यह अंतिम समाधान है जिसका मैं अभी उपयोग कर रहा हूं। इस उदाहरण में पारंपरिक 404 पृष्ठ की तरह एक वैश्विक त्रुटि घटक भी है।
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;previousLocationतर्क की आवश्यकता नहीं है।