React Router 4 链接有效但组件未呈现
React Router 4 links are working but components are not rendered
亲爱的,这是我导入其他组件并创建 Route 对象的主要组件,链接正在工作,历史对象也在更改,但组件未呈现(我在这里不使用 redux)。控制台也没有通过任何错误
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Main from './components/Main';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import Register from './components/Register';
class App extends React.Component {
render() {
return (
<Router>
<div className='container'>
<ul>
<li>
<Link to="/">Main</Link>
</li>
<li>
<Link to="/register">Register</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<Route path="/" Component={Main}/>
<Route path="/login" Component={Login}/>
<Route path="/register" Component={Register}/>
<Route path="/dashboard" Component={Dashboard}/>
</div>
</Router>
)
}
}
export default App;
尝试将 Component
变为小写,如下所示:
<Route path="/" component={Main}/>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
<Route path="/dashboard" component={Dashboard}/>
亲爱的,这是我导入其他组件并创建 Route 对象的主要组件,链接正在工作,历史对象也在更改,但组件未呈现(我在这里不使用 redux)。控制台也没有通过任何错误
import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Main from './components/Main';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import Register from './components/Register';
class App extends React.Component {
render() {
return (
<Router>
<div className='container'>
<ul>
<li>
<Link to="/">Main</Link>
</li>
<li>
<Link to="/register">Register</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<Route path="/" Component={Main}/>
<Route path="/login" Component={Login}/>
<Route path="/register" Component={Register}/>
<Route path="/dashboard" Component={Dashboard}/>
</div>
</Router>
)
}
}
export default App;
尝试将 Component
变为小写,如下所示:
<Route path="/" component={Main}/>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
<Route path="/dashboard" component={Dashboard}/>