ReactJS中的路由
有人能给我解释一下Reactjs中路由是怎么工作的吗？
browserHistory.push('/location')只更新地址栏，不重定向到它。
browserHistory.goBack()仅当页面以前被访问过时才有效，因此得名。这让我很难理解browserHitory.goForward()是如何工作的？
我一直在尝试在成功登录后重定向到仪表板。就这样。
据我所知，React不允许重新加载页面。如果我们尝试刷新页面或在url中写入地址，它将显示cannot GET /path错误；除非请求是在服务器上发出的。我试图在服务器上创建路由，但无法获得如何实现它的语法。我只在Node中编写了将res.send()发送到客户端应用程序的代码。如何呈现该路径？因为渲染到该路径将意味着节点的App.js拥有React应用程序的视图引擎。我不知道它是否足够清楚，但任何建议都会有所帮助。谢谢。
回答 3
Stack Overflow用户
发布于 2017-05-01 12:50:32
首先定义路由器中的所有part2，即您可以观看这两个视频以了解完整的路由part1 urls
您忘记添加use location(‘/browserHistory.replace’)另一件事是，不要在子路径中包含/，例如，像这样使用<Route path='submissions' component={Submissions} />
export default ( <Router history={browserHistory}>
<Route component={App}>
<Route path='/' component={Home} />
<Route path='/submissions' component={Submissions} />
<Route path='/location' component={Location} />
<Route path='/login' component={Login} />
<Route path='/dashboard' component={Member} />
</Route> </Router> );Stack Overflow用户
发布于 2019-06-07 15:48:11
Index.js
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);Component BrowserRouter在浏览器中包装历史对象，并将其向下传递到component树。在组件树中的任何位置，我们都可以使用历史对象。然后我们需要在app.js中注册我们的路由。
app.js
import { Route, Redirect, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<div>
<NavBar />
<main className="container">
<Switch>
<Route path="/not-found" component={NotFound} />
<Route path="/register" component={RegisterForm} />
<Route path="/login" component={LoginForm} />
<Redirect from="/" exact to="/home" />
<Redirect to="/not-found" />
</Switch>
</main>
</div>
);
}
}
export default App;如果我们不使用“开关”，react将首先读取"/“，由于该路由返回主页，因此每个路由也将返回主页。例如,
<Route path="/register" component={RegisterForm} />这将返回"RegisterForm“和主页。使用"Switch“时，我们必须从最具体的路由器到最通用的路由器排序。意思是“/”应该在底部。
现在我们有个问题了。每次我们从一个页面导航到另一个页面时，我们都会收到来自服务器的http请求。所有组件都是捆绑包的一部分，并且在应用程序加载时已经下载，因此不需要重新加载它们。我们应该只更新内容区域中的内容，而不是重新加载包含所有资源的整个页面。解决方案是将所有的锚点替换为来自react-router-dom的“Link”。链接组件没有“href”属性，而有“to”属性。每次我们点击链接，“链接”都会有一个点击事件。它将使用preventDefault()。因此，让我们使用Link创建一个简单的按钮：
import { Link } from "react-router-dom";
<div className="col">
<Link to="/products/new" className="btn btn-primary my-2">
New Products
</Link>
</div>在开始时，我说过BrowserRouter在浏览器中包装历史对象，并将其向下传递到组件树。所以我们通过“路由”来访问它。当我们注册路由时，"Route“会自动将"History，Location，Match”属性注入到组件中。如果你需要将额外的属性传递给被路由的组件；我们应该使用render属性而不是组件属性。
<Route path="/products" render={(props) => <Products sortBy= “newest” {...props} /> } />请注意，如果我们没有传递“props”，那么History、Location和Match就会消失。
当用户单击按钮或提交表单时，我们希望将其导航到不同的页面。“History”对象负责导航:后退、前进、推送、替换
PUSH: push方法将在浏览器历史记录中添加一个新地址，因此您可以单击back按钮并返回到您所在的位置。
替换:替换当前地址，因此我们将不会有历史记录。
handleSave = ( ) => { this.props.history.push ("/products"); };我们可以读取路由参数，并使用“match”对象将它们传递给组件。因此，我们可以在ProductDetails页面中呈现此信息，如下所示。
<div>
<h2> productDetails-{this.props.match.params.id} </h2>
</div>查询字符串参数在location对象中。
Stack Overflow用户
发布于 2017-05-01 02:26:11
您可能更一般地想知道单页面应用程序路由是如何工作的。
网上有关于这个主题的无穷无尽的资源。
这是一篇我非常欣赏的反动文章：https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997
https://stackoverflow.com/questions/43709712
复制相似问题