我是前端和 React js 的新手。我已经在我的应用程序中安装了一个模板。index.html 文件包含 css 的所有链接和路径
index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
{ all the css links and scripts goes here}
</body>
</html>
这是我的 app.js 文件。这里我提到了我的上层路线
import logo from './logo.svg';
import './App.css';
import Layout from '../src/Components/Layout/Layout'
import LoginScreen from './Components/Login/LoginScreen'
import { BrowserRouter as Router, Route } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Route path="/pages" component={Layout}/>
<Route path="/login" component={LoginScreen} exact /> …我正在创建一个主 - 细节导航,就像这里的示例反应路由器示例 ;
我有一个容器组件OneCheckpointContainer,它呈现一个导航面板CheckpointNav(链接)和一个数据组件OneCheckpointData(这个人在加载时获取数据,并呈现OneCheckpointView.
当我单击其中一个链接CheckpointNav时,除了浏览器中的URL发生更改外,没有任何反应.直到我刷新页面才会获取新数据,然后在子视图中呈现新组件.(也没有错误)
我不确定这个错误是否因为子组件还负责获取数据以及视图.
以下是我设置路线的方法:
<Route path="/modules/:id" component={OneCheckpointContainer}>
<Route path="/modules/:id/checkpoints/:cp_id" component={OneCheckpointData} />
</Route>
OneCheckpointContainer
import React from 'react';
import CheckpointNav from './CheckpointNav';
class OneCheckpointContainer extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
checkpoints: null,
user: null
};
}
componentWillMount() {
this.loadCheckpoints();
this.context.getUser((data) => this.setState({ user: data }));
}
loadCheckpoints() {
$.ajax({
url: `/api/v1/modules/student/${this.props.params.id}/checkpoints`,
method: 'GET',
}).done((data) => {
this.setState({ checkpoints: data });
}); …url-routing nested-routes reactjs react-router react-router-component
我是React的新手,我想开发一个单页应用程序,所以我正在使用react-router四路由.
在main.js下面,我指定路线
import React from 'react';
import {Router,Route} from 'react-router';
import {App} from './components/App';
import {Login} from './components/Login';
import {Home} from './components/Home';
import { history } from 'react-router';
React.render(
<Router history={history}>
<Route path="/" component={App}>
<Route path="home" component={Home}/>
<Route path="login" component={Login}/>
</Route>
</Router>,
document.getElementById('main')
);
然后是App.js,你可以看到我希望有一个固定的页眉和页脚,然后根据路线改变页面的内容.
import React from 'react';
import {Header} from './Header';
import {Footer} from './Footer';
export class App extends React.Component {
render() {
console.log(this.props.children);
return (<div>
<Header/>
<div className="page-content">
{this.props.children}
</div>
<Footer/>
</div>);
}
}
使用此代码,一旦应用程序加载了路径("/"),我需要单击主页链接以显示主页内容,但是我希望在首次加载应用程序时默认显示.
我怎样才能做到这一点？
谢谢!!
javascript reactjs react-router react-router-component react-routing
很直接。我已经看到Link在其他Microsoft Fluent UI控件上使用React Router 的示例。不过，我还没有找到将它与 Fluent UILink组件一起使用的方法。
reactjs react-router react-router-component react-router-dom fluent-ui
我使用 Reavt V6 路线。
我正在努力让我的游戏组件中的路线工作。
访问 /test 结果是一个完全空白的页面。而它应该在游戏组件中加载犯罪模块。访问 / 渲染游戏组件，但 /test 不渲染游戏组件和其中的路由。
我如何使这个工作？
访问 url /crime 应该会导致被gamecomponent加载，并且
<Route path="/test" element={<Crime />} />
应该加载。
应用程序.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import GameComponent from './gameComponent.jsx';
import { BrowserRouter as Router } from 'react-router-dom';
import { Routes, Route, Navigate, Outlet, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Login from './components/login/login.jsx';
function App() {
return (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<PrivateRoute isAuth={true} …我正在使用 react-router 将主页上的一组卡片定向到其他单个页面。但是，当我点击卡片时，新页面会在卡片组下方呈现，而我想要的只是呈现新页面。我认为问题可能与我的 App.js 在其中包含主页有关，但我不知道我应该把它放在哪里，是否应该有一个单独的链接等等？我将不胜感激任何帮助！谢谢
这是 App.js 的代码
import React from 'react';
import Routes from '../containers/routes.js';
import ProjectCards from '../containers/project_cards.js';
export default class App extends React.Component {
render() {
return(
<div>
<ProjectCards />
<Routes />
</div>
);
}
}
这是主容器：
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';
class ProjectCards extends React.Component {
render() {
var projectCards = this.props.projects.map((project, i) => {
return ( …reactjs react-router react-router-component react-router-v4 react-router-dom