Reactjs 不使用父道具直接访问子页面

如果以前有人问过，但在其他地方找不到满意的答案，请道歉

我有两个组件-

父级

和

子级

，以及两条路由

// App.js
<Route path="/parent" component={Parent} />
<Route path="/child/:name" component={Child} />

//App.js

//Parent.js
//可在/父级访问
常量父项=（）=>{
const history=useHistory（）
const children=[
{id:1，姓名：'Bob'，年龄：10岁，学校：'ABC'}，
{id:2，姓名：'Kate'，年龄：10岁，学校：'XYZ'}，
];
返回(
儿童1
儿童2
);
};

//Child.js
//可在/child/：name访问
const Child=（{姓名、年龄、学校}）=>{
返回(
{name}

{age}

{学校}

)
}

现在，如果我转到

Parent

，选择一个子项，我将看到包含所有数据的

child

组件。但是，如果我完全绕过父页面，直接转到浏览器上的

/child/Bob

url，则道具是

未定义的

，并且在子页面上看不到任何数据

这个问题的一般解决办法是什么？我可以考虑检查

Child

上的道具，如果不存在，则使用

history.push（）重定向到
Parent
。这是为了防止用户直接访问
Child
。
您可以在这种情况下使用

检查
childName
是否未定义

const {name} =  useParams();

name
将有您的Url参数

更新

最终，理想的布线方式是，始终渲染父组件，然后在父组件内创建布线。例如，主布线匹配/子布线导出组件父级，然后在父级内部，有一个布线子级/：名称，导出子级

主人
路线



在家长里面，传递你想要的道具

<Route exact path="/child/:name" component={Child} childName={yourVar} />

如果您想在子组件中呈现不同的名称，
h1
，那么@Tushar提供了一个很棒的解决方案。如果要在道具未通过路由或父级传递给子级时呈现默认值，则可以在组件中使用defaultProps。例如

const Child = ({ childName }) => {
  return <h1>{childName}</h1>
}

Child.defaultProps = { childName: 'Whatever value you want to render' };

constchild=（{childName}）=>{
返回{childName}
}
Child.defaultProps={childName:'要呈现的任何值'}；
在这个简单的示例中，这个解决方案会起作用，但如果我传递更多道具会怎么样。是的，最终理想的布线会起作用，您总是渲染父组件，然后在父组件内有布线。例如，主布线匹配/子布线导出组件父级，然后在父级内部，有一个布线子级/：名称，导出子级
<Route path={`${match.url}child`} component={Parent} />

<Route exact path="/child/:name" component={Child} childName={yourVar} />

const Child = ({ childName }) => {
  return <h1>{childName}</h1>
}

Child.defaultProps = { childName: 'Whatever value you want to render' };