我目前正在尝试在我正在构建的网站上使用React Router。我遇到了使用React Router来浏览我的网站,还做了其他的事情,比如读取参数值等。但是,我发现它有些令人困惑。你可以看到,在我的管理员登录页面上,路由器只能工作一段时间 - 但我什么时候都没想到。我正在使用this.props.history.push(' / admin / dashboard'),我认为这是正确的做法。这是我在index.js中的设置,其中我有我的所有路线:
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import './css-styling/styling.css'
import Frontpage from './Frontpage';
import { BrowserRouter, Route, Router, Switch, Link, NavLink } from 'react-router-dom';
import AdminLogin from './Admin-Login';
import AdminWelcome from './Admin-Welcome';
import Authentication from './components/Authentication';
const websiteRoutes = (
<Router history={history}>
<div>
<Switch>
<Route path="/" component={Frontpage} exact={true}/>
<Route path="/admin" component={AdminLogin} exact={true}/>
<Authentication props={this.props}>
<Route path="/admin/welcome" component={AdminWelcome} exact={true}/>
</Authentication>
</Switch>
</div>
</Router>
);
var appRoot = document.getElementById('root');
registerServiceWorker();
ReactDOM.render(websiteRoutes, appRoot);
每个&#39;组件&#39;它的结构如下:
import React from 'react';
import ReactDOM from 'react-dom';
import AdminHeader from './components/Admin-Header';
import AdminPanelLogin from './components/Admin-Panel-Add-News';
import history from './components/History';
class AdminLogin extends React.Component{
render() {
return(
<div>
<AdminHeader />
<AdminPanelLogin />
</div>
);
}
}
export default AdminLogin;
这里似乎有什么问题?我已经尝试了很多不同的解决方案,没有任何运气。其中一个是创建这个全球历史记录,您可以看到我已在AdminAddNews类中导入。
在我的情况下使用React Router的正确方法是什么?
顺便说一下; history.push发生在我的 AdminPanelLogin 组件中,代码如下所示:import React from 'react';
import ReactDOM from 'react-dom';
import { Icon, Input, Button, Message } from 'semantic-ui-react';
import {auth} from './Firebase';
import {NotificationContainer, NotificationManager} from 'react-notifications';
import { withRouter, Redirect } from 'react-router-dom';
import history from './components/History';
class AdminLogin extends React.Component{
constructor(props){
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.clickLogin = this.clickLogin.bind(this);
this.performLogin = this.performLogin.bind(this);
}
handleLogin(e){
this.setState({
[e.target.name]: e.target.value
});
}
clickLogin(e){
e.preventDefault();
auth.signInWithEmailAndPassword(this.state.email, this.state.password).then(() => {
this.props.history.push('/admin/dashboard');
}).catch((error)=> {
})
}
render() {
return (
<HTMLGOESHERE>
);
}
}
export default AdminLogin;
答案 0 :(得分:2)
很少有东西,你需要纠正,
首先:在您的路线中,您已通过history
,但您尚未在任何地方创建自定义历史记录。您现在可以简单地使用BrowserRouter。
第二:将您的身份验证组件作为Wrapper写入路由,而不是将路由作为子路径使用
<强>认证强>
const PrivateRoute = (props) => {
const userKey = Object.keys(window.localStorage)
.filter(it => it.startsWith('firebase:authUser'))[0];
const user = userKey ? JSON.parse(localStorage.getItem(userKey)) : undefined;
if (user) {
return <Route {...props} />
} else {
return <Redirect to='/admin'/>
}
}
export default PrivateRoute;
现在你的路线可以是
import { BrowserRouter as Router, Route, Router, Switch } from 'react-router-dom';
import Authentication from './Authentication';
const websiteRoutes = (
<Router>
<div>
<Switch>
<Route path="/" component={Frontpage} exact={true}/>
<Route path="/admin" component={AdminLogin} exact={true}/>
<Authentication path="/admin/welcome" component={AdminWelcome} exact={true}/>
</Switch>
</div>
</Router>
);
之外
答案 1 :(得分:1)
实际上,您必须使用browserHistory
,这是react-router
的函数。我希望以下代码段可以帮助您,
在index.js中导入react-router
import {Router, Route, browserHistory} from 'react-router';
ReactDOM.render(
<Router history={browserHistory} >
<Route path="/admin/somethingZero" component={somethingZero} />
<Route path="/admin/somethingOne" component={somethingOne}/>
</Router> , document.getElementById("root")
)
您可以使用browserHistory.push
功能
clickLogin(){
browserHistory.push('/admin/dashboard')
}
另外,继续这个tutorial,它将更好地理解路由器。