Вложенные маршруты с маршрутизатором react V4
в настоящее время я борюсь с маршрутами вложенности, используя react router v4.
ближайший пример был маршрут config в React-Router 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} />
интерфейс имеет другой макет и стиль, чем область администрирования. Поэтому в frontpage маршрут домой, примерно так и должны быть детские маршруты.
/главная должен отображаться в компоненте Frontpage и / admin / home должен отображаться в компоненте Backend.
Я пробовал некоторые варианты, но я всегда заканчивался тем, что не нажимал /home или /admin/home.
Edit-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;
7 ответов
в react-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>
)
здесь простой пример прямо из react-router документация.
просто хотел упомянуть react-router v4 радикально изменился так как этот вопрос был опубликован / ответил.
нет <Match>
компонент больше! <Switch>
- убедиться, что отображается только первый матч. <Redirect>
хорошо .. перенаправляет на другой маршрут. Использовать или не использовать 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>
надеюсь, что это помогло, дайте мне знать. Если этот пример недостаточно хорошо отвечает на ваш вопрос, Скажите мне, и я посмотрю, смогу ли я его изменить.
это правда, что для того, чтобы вложить маршруты, вам нужно разместить их в дочернем компоненте маршрута.
однако, если вы предпочитаете более "встроенный" синтаксис, а не разбивать маршруты на компоненты, вы можете использовать render
проп на <Route>
вы хотите вложить под, с встроенным функциональным компонентом без состояния, например:
<BrowserRouter>
<Route exact path="/" component={Frontpage} />
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route
path="/admin"
render={({ match: { url } }) => (
<>
<Route exact path={`${url}/`} component={Backend} />
<Route path={`${url}/home`} component={Dashboard} />
<Route path={`${url}/users`} component={UserPage} />
</>
)}
/>
</BrowserRouter>
если вас интересует почему render
вместо component
, это остановить встроенный компонент от пересаживается на каждый рендер. см. документацию подробнее.
также обратите внимание, что в приведенном выше примере используется Реагировать 16 Фрагментов чтобы обернуть вложенные маршруты, просто, чтобы сделать его немного чище. До React 16 вы можете просто использовать контейнер <div>
а не здесь.
что-то вроде этого.
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;
вы можете попробовать что-то вроде Маршруты.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import FrontPage from './FrontPage';
import Dashboard from './Dashboard';
import AboutPage from './AboutPage';
import Backend from './Backend';
import Homepage from './Homepage';
import UserPage from './UserPage';
class Routes extends Component {
render() {
return (
<div>
<Route exact path="/" component={FrontPage} />
<Route exact path="/home" component={Homepage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/admin" component={Backend} />
<Route exact path="/admin/home" component={Dashboard} />
<Route exact path="/users" component={UserPage} />
</div>
)
}
}
export default Routes
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Routes from './Routes';
class App extends Component {
render() {
return (
<div className="App">
<Router>
<Routes/>
</Router>
</div>
);
}
}
export default App;
Я думаю, что вы можете достичь того же здесь также.
здесь я создал пример в TSX, если кто-то хочет избавиться от префикса маршрута оболочки в дочернем пути маршрута:https://stackoverflow.com/a/47891060/5517306
interface IDefaultLayoutProps {
children: React.ReactNode
}
const DefaultLayout: React.SFC<IDefaultLayoutProps> = ({children}) => {
return (
<div className="DefaultLayout">
{children}
</div>
);
}
const LayoutRoute: React.SFC<IDefaultLayoutRouteProps & RouteProps> = ({component: Component, layout: Layout, ...rest}) => {
const handleRender = (matchProps: RouteComponentProps<{}, StaticContext>) => (
<Layout>
<Component {...matchProps} />
</Layout>
);
return (
<Route {...rest} render={handleRender}/>
);
}
const ScreenRouter = () => (
<BrowserRouter>
<div>
<Link to="/">Home</Link>
<Link to="/counter">Counter</Link>
<Switch>
<LayoutRoute path="/" exact={true} layout={DefaultLayout} component={HomeScreen} />
<LayoutRoute path="/counter" layout={DashboardLayout} component={CounterScreen} />
</Switch>
</div>
</BrowserRouter>
);