React 路由器呈现一个空白页面
React router renders a blank page
我正在尝试学习 ReactJS,新的 React 路由器在嵌套路由方面确实让我感到困惑。
简单的我想要三个路由如下
/ - home Page
/users - list all the users
/users/add - add user form
您可以在下面看到完整的代码示例
当我点击 /
或 /users
时,它工作正常。但是,当我到达 /users/add
路由器呈现一个空白页面而不是 AddUser 组件。
我知道我可以像 /users
和 /users/add
一样在 index.js 中定义绝对路由。但我有点想有一种更易于维护的方式来定义子组件内部的路由器。
知道如何解决这个问题吗?
// src/index.js
render(
<BrowserRouter>
<div>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route exact path="/users" component={UserLayout} />
</div>
</BrowserRouter>,
document.getElementById("root")
);
class UserLayout extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="users">
<Route exact path={this.props.match.path} component={Users} />
<Route path={`${this.props.match.path}/add`} component={AddUser} />
</div>
);
}
}
在您的 src/index.js 文件中
<Route exact path="/users" component={UserLayout} />
应该是
<Route path="/users" component={UserLayout} />
发生的事情是你的 exact 让它只匹配 /users
所以当你更新路径到 /users/add
它不会匹配路径再
我正在尝试学习 ReactJS,新的 React 路由器在嵌套路由方面确实让我感到困惑。
简单的我想要三个路由如下
/ - home Page
/users - list all the users
/users/add - add user form
您可以在下面看到完整的代码示例
当我点击 /
或 /users
时,它工作正常。但是,当我到达 /users/add
路由器呈现一个空白页面而不是 AddUser 组件。
我知道我可以像 /users
和 /users/add
一样在 index.js 中定义绝对路由。但我有点想有一种更易于维护的方式来定义子组件内部的路由器。
知道如何解决这个问题吗?
// src/index.js
render(
<BrowserRouter>
<div>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route exact path="/users" component={UserLayout} />
</div>
</BrowserRouter>,
document.getElementById("root")
);
class UserLayout extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="users">
<Route exact path={this.props.match.path} component={Users} />
<Route path={`${this.props.match.path}/add`} component={AddUser} />
</div>
);
}
}
在您的 src/index.js 文件中
<Route exact path="/users" component={UserLayout} />
应该是
<Route path="/users" component={UserLayout} />
发生的事情是你的 exact 让它只匹配 /users
所以当你更新路径到 /users/add
它不会匹配路径再