В настоящее время я борюсь с маршрутами вложенности, используя реактивный маршрутизатор v4.
Ближайшим примером была конфигурация маршрута в Документация React-Router v4.
Я хочу разбить мое приложение на две разные части.
Интерфейс и область администратора.
Я думал о чем-то вроде этого:
<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} />
Интерфейс имеет разный макет и стиль, чем область администратора. Итак, на главной странице маршрут домой, примерно так и должен быть детский маршрут.
/home должен отображаться в компоненте Frontpage, а /admin/home должен отображаться в компоненте Backend.
Я пробовал некоторые варианты, но я всегда кончался не ударом /home или/admin/home.
Изменить - 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;
В response-router-v4 вы не в гнезде <Routes />
. Вместо этого вы помещаете их в другой <Component />
.
Например
<Route path='/topics' component={Topics}>
<Route path='/topics/:topicId' component={Topic} />
</Route>
должен стать
<Route path='/topics' component={Topics} />
с
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<Link to={`${match.url}/exampleTopicId`}>
Example topic
</Link>
<Route path={`${match.url}/:topicId`} component={Topic}/>
</div>
)
Вот базовый пример прямо с реакционного маршрутизатора документация.
Просто захотелось упомянуть, что реакция-маршрутизатор v4 радикально изменилась, так как этот вопрос был отправлен/изменен.
Компонент <Match>
уже не существует! <Switch>
заключается в том, чтобы обеспечить отображение только первого совпадения. <Redirect>
well.. перенаправляет на другой маршрут. Используйте или оставьте exact
для включения или исключения частичного соответствия.
См. документы. Они великолепны. https://reacttraining.com/react-router/
Вот пример, который я надеюсь использовать, чтобы ответить на ваш вопрос.
<Router>
<div>
<Redirect exact from='/' to='/front'/>
<Route path="/" render={() => {
return (
<div>
<h2>Home menu</h2>
<Link to="/front">front</Link>
<Link to="/back">back</Link>
</div>
);
}} />
<Route path="/front" render={() => {
return (
<div>
<h2>front menu</h2>
<Link to="/front/help">help</Link>
<Link to="/front/about">about</Link>
</div>
);
}} />
<Route exact path="/front/help" render={() => {
return <h2>front help</h2>;
}} />
<Route exact path="/front/about" render={() => {
return <h2>front about</h2>;
}} />
<Route path="/back" render={() => {
return (
<div>
<h2>back menu</h2>
<Link to="/back/help">help</Link>
<Link to="/back/about">about</Link>
</div>
);
}} />
<Route exact path="/back/help" render={() => {
return <h2>back help</h2>;
}} />
<Route exact path="/back/about" render={() => {
return <h2>back about</h2>;
}} />
</div>
Надеюсь, это помогло, дайте мне знать. Если этот пример не отвечает на ваш вопрос достаточно хорошо, скажите мне, и я посмотрю, могу ли я его изменить.
Redirect
нет exact
directtraining.com/react-router/web/api/Redirect. Это было бы намного чище, чем <Route exact path="/" render={() => <Redirect to="/path" />} />
что я делаю вместо этого. По крайней мере, это не позволит мне с TypeScript.
Что-то вроде этого.
import React from 'react';
import {
BrowserRouter as Router, Route, NavLink, Switch, Link
} from 'react-router-dom';
import '../assets/styles/App.css';
const Home = () =>
<NormalNavLinks>
<h1>HOME</h1>
</NormalNavLinks>;
const About = () =>
<NormalNavLinks>
<h1>About</h1>
</NormalNavLinks>;
const Help = () =>
<NormalNavLinks>
<h1>Help</h1>
</NormalNavLinks>;
const AdminHome = () =>
<AdminNavLinks>
<h1>root</h1>
</AdminNavLinks>;
const AdminAbout = () =>
<AdminNavLinks>
<h1>Admin about</h1>
</AdminNavLinks>;
const AdminHelp = () =>
<AdminNavLinks>
<h1>Admin Help</h1>
</AdminNavLinks>;
const AdminNavLinks = (props) => (
<div>
<h2>Admin Menu</h2>
<NavLink exact to="/admin">Admin Home</NavLink>
<NavLink to="/admin/help">Admin Help</NavLink>
<NavLink to="/admin/about">Admin About</NavLink>
<Link to="/">Home</Link>
{props.children}
</div>
);
const NormalNavLinks = (props) => (
<div>
<h2>Normal Menu</h2>
<NavLink exact to="/">Home</NavLink>
<NavLink to="/help">Help</NavLink>
<NavLink to="/about">About</NavLink>
<Link to="/admin">Admin</Link>
{props.children}
</div>
);
const App = () => (
<Router>
<div>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/help" component={Help}/>
<Route path="/about" component={About}/>
<Route exact path="/admin" component={AdminHome}/>
<Route path="/admin/help" component={AdminHelp}/>
<Route path="/admin/about" component={AdminAbout}/>
</Switch>
</div>
</Router>
);
export default App;
Здесь я создал пример в TSX, если кто-то хочет избавиться от префикса маршрута обертки в пути детского маршрута: https://stackoverflow.com/questions/42254929/how-to-nest-routes-in-react-router-v4