Reactjs 在react中从父级导航到子级，其中每个组件定义自己的路由

在带有父元素和子元素的React应用程序中，我希望在导航到

/parent/child

时实现以下目标：

我希望在新页面上呈现

Child

我希望避免在

index.js

（最顶层的文件）中为

/Parent/Child

定义路由

目前，在下面的代码（）中，当导航到

/Parent/Child

时，会同时呈现父级和子级，因此违反了要求1。原因是

没有

确切的
属性

然而，使它
也不会起作用，因为
子对象
根本不会被渲染（），我理解这是为什么

一个可选的解决方案是在
index.js
中添加
/Parent/Child
路由（并且在
Parent
中去掉
路由），但它违反了要求2

那么，有可能同时满足这两个要求吗？如果是，怎么做


React版本为17，React路由器dom版本为5

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route path='/Parent' component={Parent} />
      </Switch>
      <Redirect from='/' to="/Parent" />
    </Router>
  </React.StrictMode >,
  document.getElementById('root')
);

import Child from './Child';
import { Route, useRouteMatch, useHistory } from 'react-router-dom'

function Parent() {
  const history = useHistory();
  const match = useRouteMatch();
  return (
    <div>
      <Route path={`${match.path}/Child`} component={Child} />
      <h1>Parent</h1>
      <a target="_blank" onClick={() => history.push(`${match.path}/Child`)}>Navigate To Child</a>
    </div>
  );
}

export default Parent;

import BackButton from './BackButton';

function Child() {
  return (
    <div>
      <h1>Child</h1>
      <BackButton>Go Back</BackButton>
    </div>
  );
}

export default Child;

import { useHistory } from 'react-router-dom'

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}
export default BackButton;

从“React”导入React；
从“react dom”导入react dom；
从“./Parent”导入父项；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Redirect}
ReactDOM.render(
,
document.getElementById（'root'））
);

Parent.js

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route path='/Parent' component={Parent} />
      </Switch>
      <Redirect from='/' to="/Parent" />
    </Router>
  </React.StrictMode >,
  document.getElementById('root')
);

import Child from './Child';
import { Route, useRouteMatch, useHistory } from 'react-router-dom'

function Parent() {
  const history = useHistory();
  const match = useRouteMatch();
  return (
    <div>
      <Route path={`${match.path}/Child`} component={Child} />
      <h1>Parent</h1>
      <a target="_blank" onClick={() => history.push(`${match.path}/Child`)}>Navigate To Child</a>
    </div>
  );
}

export default Parent;

import BackButton from './BackButton';

function Child() {
  return (
    <div>
      <h1>Child</h1>
      <BackButton>Go Back</BackButton>
    </div>
  );
}

export default Child;

import { useHistory } from 'react-router-dom'

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}
export default BackButton;

从“/Child”导入子项；
从“react router dom”导入{Route，useRouteMatch，useHistory}
函数父函数（）{
const history=useHistory（）；
const match=useRouteMatch（）；
返回(
父母亲
history.push（`${match.path}/Child`）}>导航到Child
);
}
导出默认父对象；

Child.js

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route path='/Parent' component={Parent} />
      </Switch>
      <Redirect from='/' to="/Parent" />
    </Router>
  </React.StrictMode >,
  document.getElementById('root')
);

import Child from './Child';
import { Route, useRouteMatch, useHistory } from 'react-router-dom'

function Parent() {
  const history = useHistory();
  const match = useRouteMatch();
  return (
    <div>
      <Route path={`${match.path}/Child`} component={Child} />
      <h1>Parent</h1>
      <a target="_blank" onClick={() => history.push(`${match.path}/Child`)}>Navigate To Child</a>
    </div>
  );
}

export default Parent;

import BackButton from './BackButton';

function Child() {
  return (
    <div>
      <h1>Child</h1>
      <BackButton>Go Back</BackButton>
    </div>
  );
}

export default Child;

import { useHistory } from 'react-router-dom'

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}
export default BackButton;

从“/BackButton”导入BackButton；
函数子（）{
返回(
小孩
回去
);
}
导出默认子对象；

BackButton.js

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route path='/Parent' component={Parent} />
      </Switch>
      <Redirect from='/' to="/Parent" />
    </Router>
  </React.StrictMode >,
  document.getElementById('root')
);

import Child from './Child';
import { Route, useRouteMatch, useHistory } from 'react-router-dom'

function Parent() {
  const history = useHistory();
  const match = useRouteMatch();
  return (
    <div>
      <Route path={`${match.path}/Child`} component={Child} />
      <h1>Parent</h1>
      <a target="_blank" onClick={() => history.push(`${match.path}/Child`)}>Navigate To Child</a>
    </div>
  );
}

export default Parent;

import BackButton from './BackButton';

function Child() {
  return (
    <div>
      <h1>Child</h1>
      <BackButton>Go Back</BackButton>
    </div>
  );
}

export default Child;

import { useHistory } from 'react-router-dom'

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}
export default BackButton;

从'react router dom'导入{useHistory}
函数BackButton（{children}）{
让历史=使用历史（）
返回(
history.goBack（）}>
{儿童}
)
}
导出默认BackButton；
您可以将父级
视为“索引”页面。使用另一个
开关
可以呈现“子路由”和默认回退路由。这利用了
开关
组件的匹配，并仅呈现单个
路由
或
重定向
组件

function Parent() {
  const history = useHistory();
  const match = useRouteMatch();
  return (
    <div>
      <Switch>
        <Route path={`${match.path}/Child`} component={Child} />
        <Route>
          <h1>Parent</h1>
          <a
            target="_blank"
            onClick={() => history.push(`${match.path}/Child`)}
          >
            Navigate To Child
          </a>
        </Route>
      </Switch>
    </div>
  );
}

函数父函数（）{
const history=useHistory（）；
const match=useRouteMatch（）；
返回(
父母亲
既然你想把它放在另一个窗口中，你就不能使用history.push here。只要把它变成一个老式的链接就行了。我可能没有正确理解它，但这样使用第二条
路线
是可以接受的做法吗？我的意思是，它没有定义
路径
。好吧，它确实有效！但我想知道这是不是一个好办法。@OfirD当然。没有路径的路由将匹配任何路径。请将其视为类似于
path={`${match.path}}
或
path=“*”
.Hmm，好吧，我只是想听听你最后的评论，看看如果我们把
和
放在它们的容器
路径
之外会发生什么。结果是父项和子项呈现在同一页上。因此，似乎将
和
嵌套在
路径下是一个必要的步骤让它工作的艺术？但是为什么（我认为增加开关和额外的“常规”路线是让它工作的原因）？OfirD当我这样做时，页面似乎无法加载，但如果我将它们放在
div
中，它仍然可以工作。实际上，只有
路由
和
重定向
组件是
开关
组件的有效子组件。如果有帮助，。你知道为什么父级和子级都在同一页面上呈现，而你的解决方案呢作品