React-Router: добавление на целевую страницу

Question

С React-Router существует концепция гнездования, из-за которой мне трудно представить, куда мне следует вводить целевую страницу.

Например:

<Route path="/" component={App}> 
     <Route path="login" component={Login} /> 
     <Route path="logout" component={Logout} /> 
     <Route path="about" component={About} /> 
     <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
</Route> 

В этом примере часть компонента верхнего уровня используется совместно с остальными компонентами.

Но с целевой страницей не может быть отношения родитель-потомок, чтобы вы могли поместить его в маршрутизацию.

Ergo, как вы управляете размещением целевой страницы при использовании реактивного маршрутизатора?

Answer 1

Хорошо, позвольте мне здесь ответить.

То, как вы могли это сделать, довольно прямолинейно, я думаю, если бы я правильно вас понял.
Я хотел бы сделать что-то вроде:

<Route path='/' component={LandingPage}> 
    <Route path='app' component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
</Route> 

, а затем включать только this.props.children в вашем App компоненте.

Answer 2

IndexRoute in React-Router позволяет определить компонент по умолчанию при достижении части вашего приложения. Таким образом, со следующим кодом, если вы перейдете к «/», страница отобразит компонент App и введет компонент LandingPage в его реквизиты.

<Route path="/" component={App}> 
    <IndexRoute component={LandingPage} /> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
</Route> 

Answer 3

Я не мог получить ни один из приведенных выше ответов для работы, поэтому я решил просто сделать это по-своему. Вот что я сделал:

<Route path="/"> 
    <IndexRoute component={Landing}/> 
    <Route path="/" component={App}> 
    <Route path="login" component={LoginOrRegister} onEnter={redirectAuth}/> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth}/> 
    <Route path="vote" component={Vote} onEnter={requireAuth}/> 
    <Route path="about" component={About}/> 
    </Route> 
</Route> 

Главный компонент содержит минимальное значение, необходимое как для целевой страницы, так и для самого приложения. В моем случае они ничего не разделяют, поэтому компонент является просто оберткой div.

const Main = ({children}) => { 
    return (
     <div> 
      {children} 
     </div> 
    ); 
};