我的 react-web-redux-router 应用程序具有正常登录和主页。问题是登录和主页重定向以及侧边栏主链接重定向工作正常。请参阅下面的图片。
登录页面：
主页：
导航栏重定向：
正如您在上面看到的图像重定向工作正常。
我的问题是导航栏有一些重定向无法正常工作的内页。
此外，当您刷新时，它会重定向到刷新时的任何空页面页面
页面加载但没有重定向或页面呈现
页面加载：
无重定向： 无重定向
我将在下面上传一些示例代码，以便您了解我的侧边栏的工作原理和身份验证流程
应用程序.js
<Router history={history}>
<div>
<PrivateRoute exact path="/" component={HomePage} />
<Route path="/login" component={props => <LoginPage {...props {...this.props} />} />
</div>
</Router>
PrivateRoute.js
<Route {...rest} render={props => (
localStorage.getItem('user')
? <Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from:
props.location } }} />
)} />
主页.js
const routes = [
{
path: "/",
exact: true,
sidebar: () => <Home/>,
main: () => <Home/>
},
{
path: "/link6",
sidebar: () => <Link6/>,
main: () => <Link6/>,
routes: [
{
path: "/link6/bus",
component: <div>Inner</div>
},
{
path: "/link7/cart",
component: <div>Inner again</div>
}
]
},
{
path: "/link7",
sidebar: () => <Link7 />,
main: () => <Link7 />
}
];
class HomePage extends React.Component {
constructor(props){
super(props)
this.state = {
active: '',
navBarTitle: 'Dashboard',
}
}
clicked(id, name){
console.log(name)
this.setState({
active: id,
navBarTitle: name
})
}
render() {
console.log(this.props)
const { user } = this.props.authentication
const { active, navBarTitle } = this.state
return (
<Router>
<div className="d-flex" id="wrapper">
<SideMenu match={this.props.match} click={(id, name) => this.clicked(id,name)} active={active}/>
<div id="page-content-wrapper">
<div className="d-flex flex-column customNav">
<NavBar user={user}/>
<h1 className="mx-3 text-light" id="menu-toggle">{navBarTitle} </h1>
</div>
<div className="container-fluid">
{routes.map((route, index) => (
// You can render a <Route> in as many places
// as you want in your app. It will render along
// with any other <Route>s that also match the URL.
// So, a sidebar or breadcrumbs or anything else
// that requires you to render multiple things
// in multiple places at the same URL is nothing
// more than multiple <Route>s.
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.sidebar}
/>
))}
</div>
<Footer />
</div>
</div>
</Router>
);
}
}
Sidebar.js
const menuArray= [
{
id:1,
name: "Link 1",
icon: "handMoney",
link: '/',
},
{
id:2,
name: "Link 2",
icon: "product",
link: '/',
},
{
id:3,
name: "Link 3",
icon: "fileEdit",
link: '/',
},
{
id:4,
name: "Link 4",
icon: "fileSetting",
link: '/',
},
{
id:5,
name: "Link 5",
icon: "userSetting",
link: '/',
},
{
id:6,
name: "Link 6",
icon: "building",
link: '/link6'
},
{
id:7,
title: "",
name: "Link 7",
icon: "multipleUser",
link: '/link7'
},
]
export default class SideMenu extends React.Component{
render() {
return(
<div className="noFlex shadow" id="sidebar-wrapper">
<div className="p-3 my-4 mx-2">
<img src={logo} className="img-fluid" alt="Xpress Cover" />
</div>
<span className="borderBottom mx-3"></span>
<div className="list-group list-group-flush py-2">
{
menuArray.map(data => {
return(
<Link key={data.id} onClick={() => this.props.click(data.id,data.name)} to={data.link} className={"list-group-item navStyle list-group-item-action" + (this.props.active === data.id ? " activeNav" : ' text-info')}>
<i className={"icon-"+ data.icon}></i> {data.name}
</Link>
)
})
}
</div>
</div>
)
}
编辑.js
<Link to={'/link6/bus'}>
<button className="buttonStyle mx-1" onClick={this.buttonClick}>
<i className={"icon-" +iconName+ " text-primary"}></i>
</button>
</Link>